Custom Elements cause rendering to fail

[larrybahr]

Describe the bug

Why trying to use the page component from web awesome I am getting an error from sveltekit because it tries to append a child to a text node (see screenshot).

Reproduction

This only happens in sveltekit. svelte/svelte playground always work fine. Here is a repo with a fresh install of sveltekit with only the +page.svelte file changed

https://github.com/larrybahr/sveltekit-custom-element-render-bug/blob/main/src/routes/%2Bpage.svelte

Logs

Uncaught DOMException: Node.appendChild: Cannot add children to a Text

System Info

Browsers: 
    firefox and edge
  System:
    OS: Linux 6.12 Pop!_OS 22.04 LTS
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 24.25 GB / 62.58 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 9.11.0 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^6.0.0 => 6.0.1 
    @sveltejs/kit: ^2.16.0 => 2.21.1 
    @sveltejs/vite-plugin-svelte: ^5.0.0 => 5.0.3 
    svelte: ^5.0.0 => 5.33.1 
    vite: ^6.2.6 => 6.3.5 


NOTE: I tried this on many versions of sveltekit 2.x.x and svelte 5.x.x with all of them having the same result.

Severity

blocking an upgrade

Additional Information

The issue appears to be with the client side hydration. The page shows up correctly for just a flash then everything disappeared.

There isn't really a work around, while I could use {@html ... } so the page renders it would defeat the point of using svelte. I am using web components all over the place and this bug is holding me back from my new site launch.

[larrybahr]

The issue seems to be with nested custom elements. If I put the elements in separate svelte files things seem to work OK (though there is some delay in rendering I have not figured out ... children components flash white for a moment, but this could be a web component mounting thing).

A much better work around than {@html ...} and in my case maybe the better way to do this in general is to put the components in different svelte files. This works really well for +layout.svlete with <wa-pag> if you follow a plan similar to https://stackoverflow.com/a/79351277

Still this is a work around, but much better than the original.