Portal

Renders children into another part of the document, without a wrapper: the content nodes are inserted directly into the mount element (or its shadow root). Nothing is left at the call site. Disposing the owner removes exactly the nodes the portal inserted; nodes that were already in the mount stay. A reactive mount moves the content, and static nodes keep their identity while they move.

On the server the content is rendered into the render's portals collector (see createServerPortals), and the document emits it at the end of <body>. When the browser hydrates the portal it adopts that markup instead of creating it again, moving it into the mount if the mount is not body. A portal with useShadow is not server-rendered; the browser creates it.

Events follow the DOM tree. Delegated handlers inside the content fire when the mount is in the document, because the document listener sees the event bubble past the mount. Handlers on elements that wrap the call site do not fire.

Import#

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

Signature#

function Portal(props: PortalProps): null

Parameters#

Returns#

Always null: the portal renders nothing in place.

Examples#

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

function Modal() {
  return <div role="dialog">Hello</div>;
}

function App() {
  return (
    <Portal mount={document.getElementById("modal-root")}>
      <Modal />
    </Portal>
  );
}