createPortal API

Description

The createPortal function allows to attach a portion of your HTML that should be rendered inside of the component in another part of the DOM (for example, in the body). This part of the HTML will still listen to changes in your component and will be removed when the parent component is also removed.

Usage

const toRender = createPortal(yourHtml, yourDomNode);

The function accepts two parameters: the first is your html to be rendered, while the second is the HTML DOM node on where you want your custom html to be attached.
Simple example:

import { createPortal } from 'wompo';

function App() {
  return html`
    <input class="custom-select" />
    ${createPortal(
      html`
        <ul class="menu">
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
        </ul>
      `,
      document.body,
    )}
  `;
}

In the above example, we want to create a custom select element, but we want to attach the custom menu with the select's options in the body, so that wherever the custom select is used, the menu will always be displayed in the correct position (which will be fixed in the screen). For this reason, we used the `createPortal` function.