Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs and tooltips.

Installation

npm install @marko-tags/portal

Example

By default, the portal renders into document.body:

<portal>
   ...content here...
</portal>

You can set a custom target container using a DOM id:

<portal target="some-id">
   ...content here...
</portal>

Or by passing a DOM Node:

<portal target=someNode>
   ...content here...
</portal>