Recipe

Svelte integration

Mount capsules in onMount, update options reactively, and destroy them when components unmount.

Host component

DropdownHost.svelte

<script lang="ts">
  import { onMount } from "svelte";
  import { mountSidebar } from "nav-schema";
  let host: HTMLElement;
  onMount(() => mountSidebar(host, { schema }));
</script>

<aside bind:this={host}></aside>

Bootstrap

main.ts

import App from "./App.svelte";
export default new App({ target: document.getElementById("app")! });