Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

fix(custom-element): prevent parse slot when custom element move in DOM #13164

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

Closed
AliGhasami wants to merge 1 commit into vuejs:main from AliGhasami:main

Conversation

@AliGhasami
Copy link

@AliGhasami AliGhasami commented Apr 5, 2025

Bug Report: Component Disappears When Moved in DOM Using Custom Element with Slot

Description

I'm using a Custom Element to wrap a Vue component that includes a slot. In this setup, shadowRoot is set to false.

The issue I'm encountering is that when I move this element within the DOM — either by dragging it or using appendChild to insert it elsewhere — the disconnectedCallback is triggered.

Inside the disconnectedCallback, nextTick is used. However, before nextTick gets a chance to execute, the connectedCallback is triggered again. As a result, _parseSlots is called before the component is fully re-initialized, and all childNodes inside the element are removed. This causes the component to suddenly disappear from the DOM.

Temporary Fix

To resolve this issue, I added a check to ensure _instance is not null before calling _parseSlots. This workaround prevents the unexpected removal of slot content.

Reproduction

If needed, I can provide a minimal reproduction of the problem.

Environment

  • Vue version: [your version]
  • Custom Element setup: shadowRoot: false
  • Browser: [your browser name and version]

Expected Behavior

Moving the component in the DOM should not cause it to lose its slotted children or disappear.

Actual Behavior

Slotted content is removed when the component is reconnected before nextTick executes.


Let me know if a repro is needed — I’d be happy to provide one.

Copy link
Member

thanks for the PR.could you please add a test ?

Copy link

github-actions bot commented Apr 6, 2025

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 100 kB (+16 B) 38.1 kB (+4 B) 34.4 kB (+20 B)
vue.global.prod.js 158 kB (+16 B) 58.3 kB (+1 B) 51.9 kB (-6 B)

Usages

Name Size Gzip Brotli
createApp (CAPI only) 46.4 kB 18.2 kB 16.6 kB
createApp 54.4 kB 21.2 kB 19.4 kB
createSSRApp 58.6 kB 22.9 kB 20.9 kB
defineCustomElement 59.2 kB (+16 B) 22.7 kB (+2 B) 20.7 kB (-6 B)
overall 68.5 kB 26.4 kB 24 kB

Copy link

pkg-pr-new bot commented Apr 6, 2025

Open in StackBlitz

@vue/compiler-core
npm i https://pkg.pr.new/@vue/compiler-core@13164
@vue/compiler-dom
npm i https://pkg.pr.new/@vue/compiler-dom@13164
@vue/compiler-ssr
npm i https://pkg.pr.new/@vue/compiler-ssr@13164
@vue/compiler-sfc
npm i https://pkg.pr.new/@vue/compiler-sfc@13164
@vue/runtime-core
npm i https://pkg.pr.new/@vue/runtime-core@13164
@vue/reactivity
npm i https://pkg.pr.new/@vue/reactivity@13164
@vue/runtime-dom
npm i https://pkg.pr.new/@vue/runtime-dom@13164
@vue/server-renderer
npm i https://pkg.pr.new/@vue/server-renderer@13164
@vue/shared
npm i https://pkg.pr.new/@vue/shared@13164
@vue/compat
npm i https://pkg.pr.new/@vue/compat@13164
vue
npm i https://pkg.pr.new/vue@13164

commit: 7f66fe6

@edison1105 edison1105 added need test The PR has missing test cases. scope: custom elements labels Apr 6, 2025
Copy link
Contributor

I'm wondering whether this is the same issue that was fixed by #13201, released in Vue 3.5.15?

edison1105 reacted with thumbs up emoji

@edison1105 edison1105 changed the title (削除) fix(custom-element): prevent parse slot when custom elemnt move in DOM (削除ここまで) (追記) fix(custom-element): prevent parse slot when custom element move in DOM (追記ここまで) Jun 7, 2025
Copy link
Member

Thanks for the PR.
Closing as fixed via #13201

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

need test The PR has missing test cases. scope: custom elements

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /