@marko-tags/portal

A Portal Component for Marko.js. A typical use case for portals is in dialogs, 'hovercards', and tooltips.

Usage no npm install needed!

<script type="module">
  import markoTagsPortal from 'https://cdn.skypack.dev/@marko-tags/portal';
</script>

README

@marko-tags/portal

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>