Scopes

Every effect, and onCleanup belongs to a scope. When the scope disposes, everything inside it tears down. Most JSX boundaries create a scope for you — knowing which ones, and where that scope is missing, is the whole contract.

The tableCopy Anchor Link

If you write onCleanup(...) or effect(...) inside any of the first five rows, the library owns its lifetime. At the boundaries below, you own it.

render — mount with a scoped lifetimeCopy Anchor Link

render(target, setup) runs setup inside a detached effectScope, appends its returned node to target, and hands back a single unmount thunk. Calling unmount removes the node from the DOM, disposes its Symbol.dispose hook, and tears down every effect / onCleanup registered inside setup.

Mounting an appCopy Anchor Link

Typical entry point — mount a root component into the page container and keep a reference to the unmount thunk (e.g. for hot-module replacement):

import { render } from "elements-kit/render";
import { App } from "./App";

const unmount = render(
  document.getElementById("app")!,
  () => <App /> as Element,
);

Inside a custom elementCopy Anchor Link

Use the same helper in connectedCallback; stash the returned unmount on the element and call it from disconnectedCallback.

import { onCleanup } from "elements-kit/signals";
import { render } from "elements-kit/render";

class Clock extends HTMLElement {
  #unmount?: () => void;

  #template = () => {
    const el = document.createElement("time");
    const id = setInterval(() => (el.textContent = String(Date.now())), 1000);
    onCleanup(() => clearInterval(id));
    return el;
  };

  connectedCallback() {
    this.#unmount = render(this, this.#template);
  }

  disconnectedCallback() {
    this.#unmount?.();
    this.#unmount = undefined;
  }
}

render runs setup inside an effectScope detached from any enclosing effect — re-running an outer effect won't tear your scope down; only calling the returned unmount will.

Why For items get their own scopeCopy Anchor Link

Each <For> item runs its render callback inside its own effectScope. onCleanup registered during render fires when that item's key leaves each — not only on full-list unmount. This keeps per-row resources (subscriptions, intervals, observers) bound to the row's actual lifetime.

<For each={rows} by={(r) => r.id}>
  {(row) => {
    const off = subscribe(row.id);
    onCleanup(off); // fires when this row is removed
    return <li>{row.label}</li>;
  }}
</For>

See alsoCopy Anchor Link

• Signals — effect, effectScope, onCleanup.
• For (list rendering) — per-item scope details.
• Custom elements overview — lifecycle hooks.