fix(custom-element): properly locate parent when slotted in shadow dom

[lejunyang]

close #12479

Summary by CodeRabbit

• Bug Fixes

  • Fixed parent resolution for custom elements when slotted within shadow DOM boundaries, ensuring they correctly inherit provide/inject values from ancestor components as expected.

• Tests

  • Added comprehensive test coverage for custom element parent resolution in shadow DOM slot scenarios to verify correct context inheritance and prevent regressions.

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@12480

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@12480

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@12480

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@12480

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@12480

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@12480

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@12480

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@12480

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@12480

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

yarn add https://pkg.pr.new/@vue/[email protected]

vue

pnpm add https://pkg.pr.new/vue@12480

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

yarn add https://pkg.pr.new/[email protected]

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@12480

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

yarn add https://pkg.pr.new/@vue/[email protected]

commit: ef6ade5

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	104 kB (+16 B)	39.3 kB (+8 B)	35.4 kB (-27 B)
vue.global.prod.js	162 kB (+16 B)	59.4 kB (+9 B)	52.8 kB (-44 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47.8 kB	18.6 kB	17.1 kB
createApp	56 kB	21.7 kB	19.8 kB
createSSRApp	60.2 kB	23.4 kB	21.4 kB
defineCustomElement	61.6 kB (+16 B)	23.4 kB (+10 B)	21.4 kB (+8 B)
overall	70.4 kB	27 kB	24.6 kB

[edison1105]

Great work.

[Copilot]

Copilot reviewed 2 out of 2 changed files in this pull request and generated no suggestions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 58ad9994-b36f-46ec-a3d3-889a7574a3bd

📥 Commits

Reviewing files that changed from the base of the PR and between cea3cf7 and e7f1584.

📒 Files selected for processing (2)

• packages/runtime-dom/__tests__/customElement.spec.ts
• packages/runtime-dom/src/apiCustomElement.ts

---

📝 Walkthrough

Walkthrough

This PR adds a test validating custom element parent resolution in slotted scenarios and modifies the connectedCallback logic in apiCustomElement.ts to check assignedSlot before falling back to parentNode or ShadowRoot.host, ensuring correct parent detection in shadow DOM environments.

Changes

Cohort / File(s)	Summary
Custom Element Parent Resolution packages/runtime-dom/src/apiCustomElement.ts	Modified the parent walk-up logic in connectedCallback to prioritize checking assignedSlot on the current parent before falling back to parentNode or ShadowRoot.host, ensuring correct parent resolution in slotted custom element scenarios.
Provide/Inject Slotted Custom Element Test packages/runtime-dom/__tests__/customElement.spec.ts	Added a test case validating correct parent resolution when a custom element is slotted inside a shadow DOM, confirming that provide/inject works correctly across slotted boundaries with the expected parent value.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• fix(custom-element): ensure proper remount and prevent redundant slot parsing with shadowRoot false #13201 — Modifies VueElement.connectedCallback in the same file, introducing a resolved-check to optimize slot re-parsing and mount flow logic.
• fix(custom-element): batch custom element prop patching #13478 — Modifies Vue custom element implementation to add lifecycle/batching patches (_beginPatch/_endPatch) in VueElement.

Poem

🐰 A slot becomes clear, no parent astray,
The assignedSlot now lights up the way,
Through shadow and light, we hop to the right,
Parent resolved true—provide/inject delight! 🌟

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing parent resolution for custom elements when slotted in shadow DOM, matching the primary objective of the PR.
Linked Issues check	✅ Passed	The PR successfully implements the required fix by adding assignedSlot checks to parent resolution logic, matching issue #12479's objective for consistent parent resolution between custom elements and Vue components.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing parent resolution for custom elements in shadow DOM; no unrelated modifications were introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

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