portal()

Render a WhisqNode inside a different DOM target than its logical parent. Useful for modals, tooltips, and dropdowns that need to escape the parent’s overflow: hidden or stacking context.

Signature

function portal(target: Element, content: WhisqNode): WhisqNode;

Parameters

Param	Type	Description
`target`	`Element`	DOM element to teleport `content` into
`content`	`WhisqNode`	Any element / component call — the portal payload

Returns

A WhisqNode that renders a marker comment at the logical location and the real content inside target. Disposing the returned node removes the teleported content.

Examples

import { signal, portal, when, div, button } from "@whisq/core";

const open = signal(false);

div(
  button({ onclick: () => open.value = true }, "Open modal"),
  when(() => open.value, () =>
    portal(document.body, div({ class: "modal-overlay" },
      div({ class: "modal-card" }, "Hello"),
    )),
  ),
);

The modal renders inside <body> instead of nested under the logical parent, so it can span the full viewport regardless of ancestor overflow rules.