counter
"); const Card = ilha(() => "card
"); mount({ Counter, Card }); ``` Each key in the registry maps to a `data-ilha` attribute value in the HTML: ```html ``` ### Options ```ts twoslash import { ilha, mount } from "ilha"; const Counter = ilha(() => "counter
"); const { unmount } = mount( { counter: Counter }, { root: document.getElementById("app")!, // default: document.body lazy: true, // mount on visibility }, ); ``` | Option | Type | Default | Description | | ------ | --------- | --------------- | ------------------------------------------------- | | `root` | `Element` | `document.body` | Scope discovery to a subtree | | `lazy` | `boolean` | `false` | Use `IntersectionObserver` to mount on visibility | ### Unmounting `mount()` returns an object with an `unmount` function that tears down all discovered islands at once: ```ts twoslash import { ilha, mount } from "ilha"; const Counter = ilha(() => "counter
"); const { unmount } = mount({ Counter }); // Later — stops all effects, removes all listeners unmount(); ``` ### Lazy mounting When `lazy: true` is set, islands are not mounted immediately. Instead, each host element is observed with an `IntersectionObserver` and mounted only when it enters the viewport. This keeps the initial page load lean when islands are below the fold. ```ts twoslash import { ilha, mount } from "ilha"; const HeavyChart = ilha(() => ""); mount({ HeavyChart }, { lazy: true }); ``` Once an island becomes visible it mounts normally and is no longer observed. ### Passing props Props can be embedded directly in the HTML using `data-ilha-props`. `mount()` reads and parses this attribute automatically — no need to pass props through JavaScript: ```html ``` ```ts twoslash import { ilha, mount } from "ilha"; const Counter = ilha(() => "counter
"); // No props needed here — they are read from data-ilha-props mount({ Counter }); ``` ### Hydration with state snapshots When using `.hydratable()` on the server, the rendered HTML includes a `data-ilha-state` attribute with a snapshot of signal values. `mount()` reads this automatically and restores state without re-fetching or re-computing: ```html ``` ```ts twoslash import { ilha, mount } from "ilha"; const Counter = ilha(() => "counter
"); // Reads data-ilha-state and restores signals from snapshot mount({ Counter }); ``` See [Render and hydrate](/guide/island/render#emit-hydration-markup) for how to generate this output on the server. ### Scoping to a subtree Pass a `root` element to limit discovery to a specific part of the page. This is useful when islands are injected dynamically into a container: ```ts twoslash import { ilha, mount } from "ilha"; const Widget = ilha(() => "widget
"); const container = document.getElementById("dynamic-content")!; const { unmount } = mount({ Widget }, { root: container }); ``` ### Notes - If a `data-ilha` value has no matching key in the registry, that element is silently skipped. - In dev mode, double-mounting the same element logs a warning and returns a no-op for that element. - `mount()` is safe to call before the DOM is fully loaded if you wrap it in a `DOMContentLoaded` listener or place the script at the end of ``. ## Build HTML strings An XSS-safe tagged template for building HTML strings. This is ilha's low-level templating API: you can use it directly, but JSX is the preferred authoring style for most apps. Because `html`` ` is plain TypeScript/JavaScript, it does not require JSX syntax, a JSX runtime import, or a build transform. That makes it a great fit for no-build apps, small scripts, server-only rendering, or any place where you want ilha's escaping and composition rules without JSX tooling. Interpolated values are HTML-escaped by default, making the safe path the default and explicit opt-in required for raw markup. ### Basic usage ```ts twoslash import { html } from "ilha"; const name = ""; html`${name}
`; // →<script>alert(1)</script>
``` ### Interpolation rules | Value type | Behavior | | -------------------- | ------------------------------------------ | | `string` / `number` | HTML-escaped | | `null` / `undefined` | Omitted — renders as empty string | | `raw(str)` | Inserted as-is, no escaping | | `html\`…\`` | Inserted as-is, already safe | | Signal accessor | Called automatically, value is escaped | | Array | Each item processed recursively, no commas | ### Escaping All string and number interpolations are escaped automatically: ```ts twoslash import { html } from "ilha"; const userInput = `${userInput}
`; // →<img src=x…>
html`${count}
`; // →42
``` The characters `&`, `<`, `>`, `"`, and `'` are all escaped. ### Skipping null and undefined `null` and `undefined` are silently omitted, making conditional rendering clean: ```ts twoslash import { html } from "ilha"; const error = null; html`Content
Content
${label}
`; }); ``` Both forms are equivalent. The no-call shorthand is purely a convenience. ### URL attributes Full-value URL attributes get the same scheme filter as JSX. If the interpolated value is the _entire_ attribute value, an unsafe scheme (`javascript:`, `vbscript:`, script-capable `data:` subtypes such as `data:text/html` or `data:image/svg+xml`) drops the attribute: ```ts twoslash import { html } from "ilha"; const url = "javascript:alert(1)"; html`x`; // → x (attribute dropped, like JSX) ``` Safe targets pass through unchanged: `https:`/`http:` URLs, relative paths, `mailto:`, and image `data:` URIs like `data:image/png;base64,…`. `srcdoc` is dropped outright, matching JSX — attribute escaping cannot neutralize it because the browser re-decodes entities into live markup. `raw()` in a URL attribute passes through unescaped, as in JSX — it is the author-owned escape hatch for values the filter rejects (for example a vetted SVG data URI). This only works when the interpolation is the whole value; partial values (`href="/u/${id}"`) are plain escaped interpolation and cannot be scheme-checked. ### Unquoted attribute values An unquoted attribute whose value contains a character the HTML tokenizer treats as a terminator (whitespace, `=`, backtick) is re-emitted quoted and escaped. What used to be an attribute-injection hole is now one parsed attribute: ```ts twoslash import { html } from "ilha"; const value = "x onmouseover=alert(1) y"; html`x`; // → x (no onmouseover attribute) ``` Benign unquoted values keep the author's literal form (`` stays ``). ### Script and style data HTML escaping is the wrong encoding inside `` or `` truncates the element. Use the `json()` and `css()` helpers for executable-element data — they escape `<` so the value can never close the block or open the `