Portal

Renders its children into a different part of the DOM (modal roots, tooltips, layers that need to escape an overflow: hidden ancestor).

If mount is omitted, the portal attaches to document.body. The portal still participates in the parent's reactive scope and disposes when the parent does.

Import

import { Portal } from "@solidjs/web";

Type signature

function Portal<T extends boolean = false, S extends boolean = false>(props: {
  mount?: Element;
  children: JSX.Element;
}): JSX.Element;

Examples

<Portal mount={document.getElementById("modal-root")!}>
  <Dialog />
</Portal>