--- title: 'Client-side component API' --- ## Creating a component ```ts // @errors: 2554 // @filename: ambient.d.ts import { SvelteComponent, ComponentConstructorOptions } from 'svelte'; declare global { class Component extends SvelteComponent {} var options: ComponentConstructorOptions>; } // @filename: index.ts // @errors: 2554 // ---cut--- const component = new Component(options); ``` A client-side component — that is, a component compiled with `generate: 'dom'` (or the `generate` option left unspecified) is a JavaScript class. ```ts // @errors: 2554 // @filename: ambient.d.ts import { SvelteComponent, ComponentConstructorOptions } from 'svelte'; declare module './App.svelte' { class Component extends SvelteComponent {} export default Component; } // @filename: index.ts // @errors: 2554 // ---cut--- import App from './App.svelte'; const app = new App({ target: document.body, props: { // assuming App.svelte contains something like // `export let answer`: answer: 42 } }); ``` The following initialisation options can be provided: | option | default | description | | --------- | ----------- | ---------------------------------------------------------------------------------------------------- | | `target` | **none** | An `HTMLElement` or `ShadowRoot` to render to. This option is required | | `anchor` | `null` | A child of `target` to render the component immediately before | | `props` | `{}` | An object of properties to supply to the component | | `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component | | `hydrate` | `false` | See below | | `intro` | `false` | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes | Existing children of `target` are left where they are. The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs/svelte-compiler#compile). Hydration of `` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `` so that the component knows which elements it's responsible for removing during hydration. Whereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`. The existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes. ```ts /// file: index.js // @filename: ambient.d.ts import { SvelteComponent, ComponentConstructorOptions } from 'svelte'; declare module './App.svelte' { class Component extends SvelteComponent {} export default Component; } // @filename: index.ts // @errors: 2322 2554 // ---cut--- import App from './App.svelte'; const app = new App({ target: document.querySelector('#server-rendered-html'), hydrate: true }); ``` ## `$set` ```ts // @filename: ambient.d.ts import { SvelteComponent, ComponentConstructorOptions } from 'svelte'; declare global { class Component extends SvelteComponent {} var component: Component; var props: Record; } export {}; // @filename: index.ts // ---cut--- component.$set(props); ``` Programmatically sets props on an instance. `component.$set({ x: 1 })` is equivalent to `x = 1` inside the component's `