SolidJS

TypeScript Configuration

Add the Web Component types to your TypeScript configuration:

{
  "compilerOptions": {
    "types": [
      // Required: Enables JSX type support for Solid
      // Or a single component: "@staticview/ui/types/solid/[component-name]"
      "@staticview/ui/types/solid",

      // 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 SolidJS application.

Importing Web Components

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

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

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

Setting Properties

Use the prop:[propertyName] syntax to set JavaScript properties:

<component-name prop:opened={isOpen}></component-name>

Setting Attributes

Use regular JSX syntax for HTML attributes:

<component-name 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. On a custom element Solid assigns attributes as JavaScript properties — close-button becomes closeButton — so pass a boolean:

<component-name close-button={hasCloseButton()}></component-name>

The prop: form states the same thing explicitly, and is worth preferring when the component has a matching property:

<component-name prop:closeButton={hasCloseButton()}></component-name>

The attr: prefix forces a real attribute, which is set to whatever value it is given. Pass "" to turn it on and undefined to turn it off:

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

Handling Events

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

<component-name on:opened={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>