Skip to content
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

Custom elements don't render inside other custom elements' slots with { shadowRoot: false } #11851

Closed
gVguy opened this issue Sep 7, 2024 · 3 comments · Fixed by #11861
Closed
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: custom elements

Comments

@gVguy
Copy link

gVguy commented Sep 7, 2024

Vue version

3.5

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-1jqn9e?file=src%2FApp.vue,src%2Fcomponents%2FDialog.vue

Steps to reproduce

  • Define a couple of components with slots as a customElements with { shadowRoot: false }
  • Place CustomElementA inside the CustomElementB's slot
  • (Additionaly) add a <Teleport> wrapper to CustomElementB's source component

What is expected?

  • CustomElementA is rendered in slot of CustomElementB
  • If there's a <Teleport> in CustomEleemntB's source component, it's teleported with all the slots

What is actually happening?

  • CustomElementA is not rendered inside of CustomElementB's slot
  • If CustomElementB has a <Teleport>, none of the slots render

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1
    Memory: 481.34 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
  Browsers:
    Chrome: 128.0.6613.120
    Chrome Canary: 130.0.6703.0
    Safari: 17.4.1
  npmPackages:
    vue: ^3.5.3 => 3.5.3

Any additional comments?

No response

@edison1105 edison1105 added 🐞 bug Something isn't working scope: custom elements labels Sep 8, 2024
@gVguy
Copy link
Author

gVguy commented Sep 8, 2024

(updated minimal reproduction: pass button content as slot)

@palasjir
Copy link

palasjir commented Sep 8, 2024

Having same issue passing span as slot to custom component. Here is the error and code it points to.
Screenshot 2024-09-08 at 20 59 29
Screenshot 2024-09-08 at 20 59 35
Maybe it helps.

@edison1105
Copy link
Member

@palasjir
It seems unrelated to this issue, Could you please create a new issue with minimal reproduction?

@edison1105 edison1105 added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label Sep 9, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Sep 30, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: custom elements
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants