Skip to content

fix(custom-elements): allow injecting values ​​from app context in nested elements (fix #13212) #13219

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

adrianbrs
Copy link

@adrianbrs adrianbrs commented Apr 17, 2025

Before this change, when a custom element was nested within another, the values provided via configureApp were ignored. Now, the provides object in the app context of a custom element inherits the provides object from its parent, allowing values to be injected properly using the app context in nested custom elements.

Note

In this implementation, values ​​provided in the configureApp method will take precedence over values ​​injected from parent elements. I believe this should be the expected behavior, since each custom element should have its own scope, but we can discuss it further if needed.

Close #13212

Playground:
https://deploy-preview-13219--vue-sfc-playground.netlify.app/#eNrdVk2P2jAQ/SuuL2QlIKraEw1ILeKwPXSrbm91D1EygGniWLZDkRD/vRNPPiDNIrqHql0OwZ55nnkzz3Zy5O+1nu5L4DMe2cRI7ZgFV2qWxWozF9zZg+ALoWSuC+PYkaWwlgqWpXVFvsogB+XGTKodJPivTbGXKbATW5siZyMMPHonlFBJoaxjD6UDw+ZDMYLgjs0X7CgUwx/B7TY2kCKewgcjMozuMGSHKuqgDcjPexip1AXGzz2GUAZLNooRh4BsjEWp3GPpNMHp9vXCVxCFODqz68WjJzZjR2J4ikJ9CfDr0O/J/e6+r/ig2/Pqu21WOBa2lijsaFGVp3H17Fq3lpvSAAobxFrfNQ7GcDatFWp7OWZtVwdh1E1E1W0lEGWsntRD6rKv4hZ52+ikA0b3g4nfeVWOf3wX+EJfxC7o5N2DMWiaXOjcQ1/KdcNmWG5lVkn3/x542tO+jr8p+IC8TXvlmgWvkvNW2ukGsEayTYCMjZC18r0FJMgTa8Z0UVfpMOut+eoW/1G+ZkP5Rjwn3ySplHlO1nplndsLXBOIQnoRYvtx4iDXWezAixEN9auWqe/zWTpBn+awiMIrzjr4IIQ49V0NqSg8487H+CqnW2G6s4XC973vmOBJkWuZgXnQTuLZERw3JCUVPM6y4udHb3OmBH/Q/ZotJD8G7Lvqa2GGg88GLJg9CN76XGxQRnKvHj/BAcetMy/SMkP0FecXsEVWVhwJ9qFUKdI+w3m29/5DRarNV7s6OFC2Kaoi2t2TguO3yfJK6R3dN9O3bQppLy6xyv2tkVhw3/lGB8HJ8b0+vSd++gXFBQq6

…sted elements

Before this change, when a custom element was nested within another, the values provided via `configureApp` were ignored. Now, the provides object in the app context of a custom element inherits the provides object from its parent, allowing values to be injected properly using the app context in nested custom elements.

Close vuejs#13212
@adrianbrs adrianbrs marked this pull request as ready for review April 17, 2025 22:34
Copy link

github-actions bot commented Apr 18, 2025

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 101 kB (+144 B) 38.2 kB (+49 B) 34.4 kB (+33 B)
vue.global.prod.js 158 kB (+144 B) 58.3 kB (+46 B) 51.9 kB (+88 B)

Usages

Name Size Gzip Brotli
createApp (CAPI only) 46.4 kB 18.1 kB 16.6 kB
createApp 54.4 kB (+6 B) 21.2 kB (+5 B) 19.4 kB (+14 B)
createSSRApp 58.6 kB (+6 B) 22.9 kB (+10 B) 20.9 kB (-1 B)
defineCustomElement 59.4 kB (+144 B) 22.8 kB (+39 B) 20.8 kB (+33 B)
overall 68.5 kB (+6 B) 26.4 kB (+5 B) 24 kB (+24 B)

Copy link

pkg-pr-new bot commented Apr 18, 2025

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@13219

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@13219

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@13219

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@13219

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@13219

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@13219

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@13219

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@13219

@vue/shared

npm i https://pkg.pr.new/@vue/shared@13219

vue

npm i https://pkg.pr.new/vue@13219

@vue/compat

npm i https://pkg.pr.new/@vue/compat@13219

commit: 87cda11

@edison1105 edison1105 added 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: custom elements labels Apr 18, 2025
…rnal instance

The internal instance of a custom element already inherits the app context’s provides object via the prototype chain, so there’s no need to override it or add extra logic to the `provide` function.
@edison1105
Copy link
Member

/ecosystem-ci run

@vue-bot
Copy link
Contributor

vue-bot commented Apr 18, 2025

📝 Ran ecosystem CI: Open

suite result latest scheduled
primevue success success
radix-vue success success
nuxt success success
vant success success
pinia success success
language-tools success success
router success success
test-utils success success
vuetify success success
vue-simple-compiler success success
vue-macros success success
quasar success success
vueuse success success
vue-i18n success success
vite-plugin-vue success success
vitepress success success

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: custom elements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Injection breaks when nesting Vue custom elements
3 participants