Portal

When an element requires rendering outside of the usual document flow, challenges related to stacking contents and z-index can present. <Portal> helps this by rendering elements outside of the usual document flow so they are rendered correctly and interactively.

import { Portal } from "solid-js/web"

<Portal>
  <div class="popup">...</div>
</Portal>

The content nested within <Portal> is positioned at a designated location when shown. By default, these elements are rendered at the end of the document body, to make sure they are not bound by the styling or layout restrictions of the parent component.

View on Eraser

This can be changed by passing a mount prop to <Portal>. The mount prop accepts a function that returns a DOM node, which will be used as the mount point for the portal content.

import { Portal } from "solid-js/web"

<Portal mount={document.querySelector("#popup-container")}>
  <div class="popup">...</div>
</Portal>

Using <Portal> can be particularly useful in cases where elements, like information popups, might be clipped or obscured due to the overflow settings of their parent elements. By putting the element outside of the parent element, it is no longer bound by the overflow settings of its parent. This creates a more accessible experience for users, as the content is no longer obscured.