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

[gVguy]

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

[gVguy]

(updated minimal reproduction: pass button content as slot)

[palasjir]

Having same issue passing span as slot to custom component. Here is the error and code it points to.


Maybe it helps.

[edison1105]

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