Portal

Moves its content to the end of the document body (or a target).

Import
import { Portal } from '@texuli/primitives/portal';
Pattern
Utility
Size budget
4.0 KiB gzip for @texuli/primitives/portal
Reference
packages/primitives/docs/prim-portal.md

Live demo

Loading the Portal demo…

Anatomy

Portal anatomy: each box holds the parts inside it.
  • Portal

Behavior checks

tests/behavior/scenarios/portal.spec.ts runs 3 rows against the Portal scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 3 rows
  1. portaled content renders outside the component, at the end of the page
  2. changing the target moves the content there
  3. the toast region stays keyboard-reachable while a modal is open (R16)

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/portal (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).