Vue version
3.5.0 - 3.5.13
Link to minimal reproduction
https://play.vuejs.org/#eNrlVcFu2kAQ/ZXVqpKNRIwi2gshSG3EIT00VdNbHTXIHmCpvbvaXVMkxL93dtYG2ySohx4ilQNiZ96M386bZ/b8o9bJtgI+4VObGaEds+AqPUslY6LUyjgWJaOHyoGZF1CCdImz0U03fS9lPz0dhXbYCA8OSl0sHFDbqfLdriDgZ9NR9+xrW3g+5M5mSi7FKtlYJZHp3ndJeaZKLQowD9oJJW3KJ4wyPrcoCvX7M8WcqWDYxLM1ZL9eiG/szsdS/tWABbOFlB9zbmFW4EJ6/vgFdvj7mCxVXhWIvpD8BlYVlecYYJ8qmSPtFo7Y3tM4hVx9t/OdA2mbS3miHnkgfMpRrrsLVz/RHSfvqS6VB5xiT0OcYy3gnuWwFBLuKutUWSPYgS2NKsPjUo6K9tFIQcnLSCE3kF0CrM9zqUSxrWO0FA2Z25coxv5yPTJxPQZa4njQTIWx0NSuFwZybBeYxVEIRANa6BOOHt6C0fkMJfzat1B0JlSDM0jDSIZEbmfsRxP1n3Uc5WIbDc+i62sMRiQWqy0RDepN6ZU+PxL7CXu3D/c4PL+GpH4eSDd5HUdO9ji6Sxf31D5gCUEa20aDJvdUTwnXDr9CTS1DsHFlAN868ULrlj54SrRRW5HDURWcw5k+HVyQBWFdfcKTUxmUyNo7Y5OwMHXtkf2ws2+DG/RL76X21v1Cavy3fiGx3q5f/oEnTru+BWNEnoO86o+5UxCmiwWnMf+1ObrWHnaWi8zxE0n4Pyh0xTj5kFyP+eEPRwulpQ==
Steps to reproduce
Create two custom elements using Vue's defineCustomElement (outer-component and inner-component). In both defineCustomElement calls, use configureApp to provide a value. Then, nest inner-component within outer-component.
What is expected?
I expect that both custom elements get their own isolated injection scope. Values that are provided on inner-component are not visible on outer-component, and vice versa.
Or, even if inner-component has access to the values provided by outer-component, I expect that it definitely has access to the values provided on inner-component and those have precedence.
What is actually happening?
The injection scope of outer-component is applied to inner-component.
This means that when using inject in inner-component, only values that are provided on outer-component can be injected. Values provided on inner-component are not injectable within inner-component.
System Info
Any additional comments?
No response
Vue version
3.5.0 - 3.5.13
Link to minimal reproduction
https://play.vuejs.org/#eNrlVcFu2kAQ/ZXVqpKNRIwi2gshSG3EIT00VdNbHTXIHmCpvbvaXVMkxL93dtYG2ySohx4ilQNiZ96M386bZ/b8o9bJtgI+4VObGaEds+AqPUslY6LUyjgWJaOHyoGZF1CCdImz0U03fS9lPz0dhXbYCA8OSl0sHFDbqfLdriDgZ9NR9+xrW3g+5M5mSi7FKtlYJZHp3ndJeaZKLQowD9oJJW3KJ4wyPrcoCvX7M8WcqWDYxLM1ZL9eiG/szsdS/tWABbOFlB9zbmFW4EJ6/vgFdvj7mCxVXhWIvpD8BlYVlecYYJ8qmSPtFo7Y3tM4hVx9t/OdA2mbS3miHnkgfMpRrrsLVz/RHSfvqS6VB5xiT0OcYy3gnuWwFBLuKutUWSPYgS2NKsPjUo6K9tFIQcnLSCE3kF0CrM9zqUSxrWO0FA2Z25coxv5yPTJxPQZa4njQTIWx0NSuFwZybBeYxVEIRANa6BOOHt6C0fkMJfzat1B0JlSDM0jDSIZEbmfsRxP1n3Uc5WIbDc+i62sMRiQWqy0RDepN6ZU+PxL7CXu3D/c4PL+GpH4eSDd5HUdO9ji6Sxf31D5gCUEa20aDJvdUTwnXDr9CTS1DsHFlAN868ULrlj54SrRRW5HDURWcw5k+HVyQBWFdfcKTUxmUyNo7Y5OwMHXtkf2ws2+DG/RL76X21v1Cavy3fiGx3q5f/oEnTru+BWNEnoO86o+5UxCmiwWnMf+1ObrWHnaWi8zxE0n4Pyh0xTj5kFyP+eEPRwulpQ==
Steps to reproduce
Create two custom elements using Vue's
defineCustomElement(outer-componentandinner-component). In bothdefineCustomElementcalls, useconfigureApptoprovidea value. Then, nestinner-componentwithinouter-component.What is expected?
I expect that both custom elements get their own isolated injection scope. Values that are provided on
inner-componentare not visible onouter-component, and vice versa.Or, even if
inner-componenthas access to the values provided byouter-component, I expect that it definitely has access to the values provided oninner-componentand those have precedence.What is actually happening?
The injection scope of
outer-componentis applied toinner-component.This means that when using
injectininner-component, only values that are provided onouter-componentcan be injected. Values provided oninner-componentare not injectable withininner-component.System Info
Any additional comments?
No response