Lifecycle

Create and destroy

Mounting returns a disposer. Call it when a component unmounts or when you want to fully tear down the live instance.

const destroySidebar = mountSidebar(sidebarEl, { schema });
const destroyMegaMenu = mountMegaMenu(navEl, { schema: megaMenu });

// Later
destroySidebar();
destroyMegaMenu();

Observation

In most apps, update navigation by calling the mount helper again with fresh state. The live instance is recreated against the same container.

mountSidebar(container, { schema });

// Re-render by mounting again with a changed schema/options object.
mountSidebar(container, {
  schema: nextSchema,
  currentUrl: location.href
});

Hydration

You can render HTML on the server, insert it into the DOM, then mount the live helper over the same markup on the client.

const html = renderSidebarHtml(schema, { currentUrl: "/docs" });
container.innerHTML = html;

mountSidebar(container, { schema, currentUrl: "/docs" });

Dispose

Disposal is a plain function call. If your component framework supports cleanup hooks, call the disposer there.

const dispose = mountSidebar(container, { schema });
dispose();

Attribute mode

Declarative hosts are useful when markup is produced by a CMS or server template. The same schema data still drives the live mount.

<a class="nav-sidebar-link current-page-active" href="/docs">Docs</a>