claimElement

Adopts the server's element for a hydration key while hydrate() runs: the step that lets a custom template reuse server markup instead of creating new nodes. The element loses its data-hk attribute, and the content of its regions is lifted out, to be adopted by takeRegion when the regions bind. Prefer claims.current.claimElement, which links this code only into apps that call hydrate().

Import#

import { claimElement } from "@shadow-js/web/extend";

Signature#

function claimElement(key: string | undefined): Element | null

Parameters#

Returns#

The server element; null when no hydration pass is running, when key is undefined, or when the server sent no element for the key (the caller then creates the node itself). A missing key is a recoverable mismatch: development builds warn HYDRATION_KEY_MISS, and the pass's onRecoverableError receives an Error.

Examples#

import { claimElement, nextKey } from "@shadow-js/web/extend";

function createPanel(): Element {
  // During hydrate(): the server's <section>. Otherwise: a new one.
  return claimElement(nextKey()) ?? document.createElement("section");
}