Skip to content

Injection breaks when nesting Vue custom elements #13212

@jessevanassen

Description

@jessevanassen

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: custom elements

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions