claimPortal

Adopts the server block of a portal while hydrate() runs. The server writes each portal's markup at the end of <body> between <!--portal:KEY--> and <!--/portal:KEY--> comments (see createServerPortals); this removes the comments, leaves the content in place, and registers its keyed elements so the portal's templates claim them.

Import#

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

Signature#

function claimPortal(key: string | undefined): Node[] | undefined

Parameters#

Returns#

The nodes of the block, in place in the body; undefined when no hydration pass is running, key is undefined, there is no document body, or the server sent no complete block for the key.

Examples#

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

function mountOverlay(build: () => Node): Node[] {
  const adopted = claimPortal(nextKey());
  if (adopted !== undefined) return adopted;
  const node = build();
  document.body.append(node);
  return [node];
}