Skip to content
staticview

Svelte

TypeScript Configuration

Add the Web Component types to your TypeScript configuration:

tsconfig.json
{
  "compilerOptions": {
    "types": [
      // Required: Enables JSX type support for Svelte
      // Or a single component: "@staticview/ui/types/svelte/[component-name]"
      "@staticview/ui/types/svelte",


      // Optional: Adds native DOM types (e.g. `querySelector`, `document`)
      // Or a single component: "@staticview/ui/types/dom/[component-name]"
      "@staticview/ui/types/dom",


      // Optional: Exposes component types globally (no imports needed)
      // Or a single component: "@staticview/ui/types/global/[component-name]"
      "@staticview/ui/types/global",
    ],
  },
}

This provides TypeScript support for the web components in your Svelte application.

Importing Web Components

Web components are registered globally in the browser. Import them once in your application's entry point:

app.tsx
import "@staticview/ui/[component-name]";

Important: Do not import web components in multiple files. Import them only once at application startup.

Setting Properties and Attributes

If the web component has a JavaScript property, Svelte will automatically set it, otherwise, it sets it as an HTML attribute.

<component-name opened={isOpen} label="Title"></component-name>

Boolean Attributes

A boolean attribute is on whenever it is present, whatever its value: close-button="false" turns the close button on. Svelte only removes an attribute whose value is null or undefined, and stringifies everything else, so close-button={false} renders close-button="false". Use the JavaScript property when the component has one, since Svelte assigns matching setters directly:

<component-name closeButton={hasCloseButton}></component-name>

Otherwise pass "" to turn it on and undefined to turn it off:

<component-name close-button={hasCloseButton ? "" : undefined}></component-name>

Handling Events

Use on[eventName] syntax to listen for custom events:

<component-name onopened={handleOpen}></component-name>

Using Slots

Use children to render the content of the web component:

<component-name>
  <span slot="title">Title</span>
  <span>Content</span>
</component-name>