Declarative shadow DOM reacts strangely in sveltekit

Describe the bug

Tried using declarative shadow DOM in sveltekit and it does not seem to support it. Firstly <template> tags are stripped from output so had to work around by using <svelte:element this="template"> but even then the hydration cycle results in a flash and DOM nodes being replicated.

Reproduction

• https://stackblitz.com/edit/sveltejs-kit-template-default-odfyks

Navigate to shadow dom page (refresh browser to get server rendered content), and inspecting the DOM will show that shadow dom has been created but template has been re-rendered via sveltekit hydration.

Particularly noticeable when using external css file, results in a flash of unstyled content when JS kicks in.

Logs

No response

System Info

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M2
    Memory: 170.39 MB / 24.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 112.0.2
    Safari: 16.2
  npmPackages:
    @sveltejs/adapter-cloudflare: ^2.2.0 => 2.2.0 
    @sveltejs/kit: ^1.15.7 => 1.15.7 
    svelte: ^3.56.0 => 3.56.0 
    vite: ^4.2.0 => 4.2.1

Severity

annoyance

Additional Information

No response

Start with the linked StackBlitz reproduction and inspect the server-rendered declarative shadow DOM before and after SvelteKit hydration. Trace why the template is stripped or re-rendered, then verify that hydration preserves the shadow DOM without duplicated nodes or a flash of unstyled content.