takeRegion

Adopts the server content of the next region of a claimed parent while hydrate() runs: the nodes that sat between the region's markers are put back before anchorNode and returned, so a custom region can bind to them instead of inserting new nodes.

Adopts the server content of the next region of a claimed parent while hydrate() runs: the nodes that sat between the region's markers are put back before anchorNode and returned, so a custom region can bind to them instead of inserting new nodes. Regions are taken in document order.

Import#

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

Signature#

function takeRegion(parent: Node, anchorNode: Node | null): Node[] | undefined

Parameters#

Name	Description
`parent`	An element returned by claimElement (or one of its descendants).
`anchorNode`	The node the content goes before; `null` appends it at the end of `parent`.

Returns#

The adopted nodes; undefined when no hydration pass is running or parent has no region left to adopt (the caller then inserts fresh nodes).

Examples#

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

function fillRegion(parent: Element): Node[] {
  const adopted = takeRegion(parent, null);
  if (adopted !== undefined) return adopted;
  const text = document.createTextNode("fresh");
  parent.append(text);
  return [text];
}