Portal
<Portal mount={element}>children</Portal> renders its children into another element, without a wrapper.
<Portal mount={element}>children</Portal> renders its children into another element, without a wrapper. The default mount is document.body. mount may be an element or a function returning one (read reactively; changing it moves the content, and static nodes keep their identity). useShadow puts the content in a shadow root of the mount, created once.
- Nothing is left at the call site and nothing is rendered on the server.
- Disposing the portal's owner removes exactly the nodes it inserted; nodes that were already in the mount stay.
- Delegated events (
onClick,onInput, ...) fire for content inside the portal. Handlers on elements that wrap thePortalcall site do not fire, because the DOM tree, not the component tree, decides propagation. - A missing or
nullmount renders nothing and logs one development warning,PORTAL_TARGET_MISSING.