SvelteKit

Wire the handle hook from your src/hooks.server.{js,ts} so you control import order. Unlike Astro, SvelteKit hands the adapter the rendered HTML string (via transformPageChunk), so it calls renderToString directly — buffering the page's chunks and transforming the whole document once, on the final chunk:

// src/hooks.server.js
import "@webtides/element-js-ssr-renderer/dom-shim";
import { elementSSR } from "@webtides/element-js-ssr-renderer/sveltekit";
import Button from "@webtides/element-library/button";

export const handle = elementSSR({
  resolve: [
    { "el-button": Button }, // eager element-library components
    import.meta.glob("./components/*.js"), // this project's — loaded on demand
  ],
});

elementSSR takes the same sources as everywhere else (see Resolving components). Author components as plain HTML in your +page.svelte / +layout.svelte, keep document-global styles in app.html (so the renderer can adopt them into shadow roots), and load each component's define on the client (e.g. from a layout's onMount).

Svelte <style> is scoped

Svelte component <style> blocks are scoped, so they aren't picked up as global styles. Put styles you want shadow components to adopt in app.html as plain CSS. See Style handling.

Runnable example

A complete, runnable version lives in examples/sveltekit/ — an @sveltejs/adapter-node app composing element-library components (an eager static catalog) with its own (import.meta.glob(...)), covering both the shadow (DSD) and light-DOM paths.

bash

cd examples/sveltekit && npm install && npm run dev

SvelteKit ​

Runnable example ​

SvelteKit

Runnable example