Skip to content

[custom-element] Slots outside Teleport not rendered when using shadowRoot: false (regression from #11851) #13899

@canciodev

Description

@canciodev

Vue version

Vue 3.5.5+ (regression introduced by PR #11861 that closed issue #11851)

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ycis7iro?file=src%2FApp.vue,src%2Fcomponents%2FWidget.vue&terminal=dev

Steps to reproduce

  1. Build the component above as a custom element with shadowRoot: false.
  2. Mount it in a page with both headerContent and bodyContent slots.
  3. Observe the rendered DOM.

What is expected?

  • Both headerContent (outside Teleport) and bodyContent (inside Teleport) should render.
  • The slot collection should check both the host root and the teleport target.

What is actually happening?

When the component is built as a custom element with shadowRoot: false, only the slots inside the Teleport are rendered. Any slots defined outside the Teleport (e.g. headerContent) are ignored, so their projected content never appears in the DOM.

Root cause: in apiCustomElement.ts, slots are collected via:
const outlets = (this._teleportTarget || this).querySelectorAll('slot')

System Info

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: custom elements

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions