Portal¶

The <h-portal> webcomponent is a wrapper for a content that is to be rendered in a different location. The children of the <h-portal> webcomponent will be rendered in the specififed <h-portal-target> element. The component is used internally by the Modal, Dropdown, and Tooltip webcomponents. Every <h-portal> element should have a hidden attribute as we don't want to show portaled children in the DOM.

Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.

Attributes¶

<h-portal> to attribute is used to specify the target element. There may be multiple <h-portal> webcomponents with the same to attribute. The <h-portal-target> name must be unique. There may be only one <h-portal-target> element with the same name attribute.

DOM events¶

This webcomponent dispatches the following DOM events:

open
close

Example¶

sourceoutput

<h-portal to="target" hidden>
    <div>This content will be rendered in corespoding `h-portal-target`</div>
</h-portal>

<div>
    <h-portal-target name="target"></h-portal-target>
</div>

<h-portal to="target" hidden></h-portal>

<div>
    <h-portal-target name="target">
        <div>This content will be rendered in corespoding `h-portal-target`</div>
    </h-portal-target>
</div>

Example¶

multiple <h-portal> elementsoutput

<h-portal to="target" hidden>
    <div>This content will be rendered in corresponding `h-portal-target`</div>
</h-portal>

<div>
    <h-portal to="target" hidden>
        <div>This content will also be rendered in corresponding `h-portal-target`</div>
    </h-portal>
</div>

<div>
    <h-portal-target name="target"></h-portal-target>
</div>

<h-portal to="target" hidden></h-portal>

<div>
    <h-portal to="target" hidden></h-portal>
</div>

<div>
    <h-portal-target name="target">
        <div>This content will be rendered in corespoding `h-portal-target`</div>
        <div>This content will also be rendered in corresponding `h-portal-target`</div>
    </h-portal-target>
</div>

Portals also may be disabled by setting the disabled attribute to true. This is useful when you want to disable the portal for a specific element. Enabling the portal will automatically portal elements to target element.

sourceoutput disabledoutput enabled

<h-portal to="target" disabled>
    <div>This content will be rendered in corresponding `h-portal-target`</div>
</h-portal>

<div>
    <h-portal-target name="target"></h-portal-target>
</div>

<h-portal to="target" hidden disabled></h-portal>
<h-portal-target name="target"></h-portal-target>

<h-portal to="target" hidden></h-portal>
<h-portal-target name="target">
    <div>This content will be rendered in corresponding `h-portal-target`</div>
</h-portal-target>

Multiple `<h-portal-target>` elements¶

We can have multiple <h-portal> webcomponents targeting multiple <h-portal-target> elements.

Example¶

multiple <h-portal> elements with multiple <h-portal-target>output

<h-portal to="portal-1" hidden>
    <div>This content will be rendered in portal-1</div>
</h-portal>

<h-portal to="portal-2" hidden>
    <div>This content will be rendered in portal-2</div>
</h-portal>

<div>
    <h-portal-target name="portal-1"></h-portal-target>
</div>

<h-portal-target name="portal-2"></h-portal-target>

<h-portal to="portal-1" hidden></h-portal>
<h-portal to="portal-2" hidden></h-portal>

<div>
    <h-portal-target name="portal-1"><div>This content will be rendered in portal-1</div></h-portal-target>
</div>

<h-portal-target name="portal-2"><div>This content will be rendered in portal-2</div></h-portal-target>

Portal¶

Attributes¶

DOM events¶

Example¶

Example¶

Multiple <h-portal-target> elements¶

Example¶

Multiple `<h-portal-target>` elements¶