Svelte strips slot inside declarative shadow dom

[vekunz]

Describe the bug

Several months ago the "Declarative Shadow DOM" standard was finalized. I wanted to try this out but stepped over a major issue in combination with Svelte.

If I define a <slot></slot> inside the declarative shadow dom, the Svelte compiler strips it out.

Svelte should not touch a <slot></slot> element inside a <template shadowrootmode="..."></template> element. If Svelte does not change the current behavior, the whole point of Declarative Shadow DOM (which is Server-Side Rendering of WebComponents) is pointless.

Reproduction

This is a basic example of a WebComponent with Declarative Shadow DOM:

<ex-dummy>
  <template shadowrootmode="open">
    <p>This Declarative Shadow DOM component content</p>
    <p><slot></slot></p>
  </template>
  This is slot content
</ex-dummy>

I create a reproduction repo, also. https://github.com/vekunz/sveltekit-shadowdom-slot
The file /src/routes/+page.svelte contains the web component with the declarative shadow dom. But after building it (npm run build) the <slot></slot> is missing from the output html (/build/index.html).

Logs

--

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 107.45 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.18.0/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
    pnpm: 8.11.0 - ~/.nvm/versions/node/v18.18.0/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.69
    Safari: 17.3.1
  npmPackages:
    svelte: 4.2.12 => 4.2.12

Severity

blocking all usage of svelte

[vekunz]

Btw: If anyone thinks that server-side rendering of web components is no use-case inside of Svelte, then I can proof this wrong. I created a proof of concept with Lit web components with the Lit SSR package. I successfully integrated Lit Server-Side Rendering inside a SvelteKit application, except two issues. One should be inside the (experimental) Lit SSR package, and the other is this issue inside Svelte.

[Conduitry]

Does using https://svelte.dev/docs/special-elements#svelte-element to insert a literal <slot> element work in the meantime? (<svelte:element this='slot'/>)

I'm unsure that we should change how this behaves in Svelte v4, as there isn't another way to insert slotted content. It might make sense for v5, though, since <slot> is being deprecated there anyway in favor of snippets.

[vekunz]

Does using https://svelte.dev/docs/special-elements#svelte-element to insert a literal <slot> element work in the meantime? (<svelte:element this='slot'/>)

This works inside my reproduction app! I try to incorporate it in my Lit-SSR-SvelteKit-PoC

I'm unsure that we should change how this behaves in Svelte v4, as there isn't another way to insert slotted content. It might make sense for v5, though, since <slot> is being deprecated there anyway in favor of snippets.

Since I would consider such a change to be a breaking change, I would not change it in Svelte 4 either.

[dummdidumm]

Yeah it would definitely be a breaking change to change behavior. For Svelte 5 we could specifically not transform slot when we detect it's inside a template element (what would that even mean?).