Slots content not replaced properly in custom elements when shadow root is disabled (v4)

[patricknelson]

Describe the bug

Improvements were made to custom elements in #8457 for v4 to allow you to disable the shadow root. However, slot content appears to not be positioned properly when replaced. See screenshot and reproduction below.

Specifically: When slot content is defined inside of the custom element, instead of placing that content into the slot positions in the component, they are instead positioned at the very top of the host in the order in which they were defined (prior to mounting, a.k.a. connectedCallback).

Note: This affects both named and default slots.

Example component:

<svelte:options
	customElement={{
		tag: 'example-no-shadow',
		shadow: 'none',
	}}
/>

<h2>shadow: 'none'</h2>
<p>Slot 1:</p>
<slot name="slot1"><p>Fallback content 1</p></slot>
<p>Slot 2:</p>
<slot name="slot2"><p>Fallback content 1</p></slot>

Example HTML:

<example-no-shadow>
	<p class="replaced" slot="slot2">replaced slot2</p>
	<p class="replaced" slot="slot1">replaced slot1</p>
</example-no-shadow>

DOM tree:

Rendered output:

Reproduction

Code at https://github.com/patricknelson/svelte-v4-custom-element-slots

git clone https://github.com/patricknelson/svelte-v4-custom-element-slots.git
cd svelte-v4-custom-element-slots
npm i
npm run dev

Logs

No response

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 2.37 GB / 5.79 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
  npmPackages:
    svelte: ^4.0.0-next.0 => 4.0.0-next.0

Severity

blocking an upgrade

[dominikg]

related to #1689 ?

Does it work with svelte-3 or svelte-4 defaults (without shadow option)?

[patricknelson]

@dominikg As it turns out, this issue applies only to when no shadow root is in use, which happens to be strictly a v4 feature (circa #8457). Thankfully I happen to already have an example in the demo repo noted above (here) and the first example shows this particular bug (i.e. the slots not being replaced properly at all) working just fine when the shadow root is in use.

See here:

[dummdidumm]

This is a limitation of shadow: "none" we need to document - there's no way to use custom elements without a shadow root and still use slots, the browser does not have such a concept.

[patricknelson]

Hmm... @dummdidumm I've implemented slots fairly flawlessly in my package svelte-retag (https://github.com/patricknelson/svelte-retag) for Svelte 3 (probably works in v4, haven't tried it yet since I only just created it). Not only does it work when deferred (where the full DOM is already known) but also when running early before parsing, using MutationObserver.

Check it out and see what I mean.