@saekitominaga/customelements-portal

Add animated motion to the `<portal>` element by Custom Elements.

Usage no npm install needed!

<script type="module">
  import saekitominagaCustomelementsPortal from 'https://cdn.skypack.dev/@saekitominaga/customelements-portal';
</script>

README

Animated motion <portal> by Custom Elements

npm version

Add animated motion to the <portal> element by Custom Elements.

Demo

Examples

<x-portal-animation
  src="foo.html"
  referrerpolicy="origin">
</x-portal-animation>

Attributes

src [optional]
URL of a page to be displayed. (Same as src attribute of <portal> Element)
referrerpolicy [optional]
Referrer Policy. (Same as referrerpolicy attribute of <portal> Element)

e.g. <x-portal-animation src="https://example.com/" referrerpolicy="same-origin"></x-portal-animation>

Style customization (CSS custom properties)

| name | deault | Description | |-|-|-| | --portal-width | 640px | Width of portal | | --portal-height | 360px | Height of portal | | --portal-max-width | 100% | Maximum width of portal | | --portal-max-height | 100vh | Maximum height of portal | | --portal-border-style | solid | Border style of portal (border-style property) | | --portal-border-width | 1px | Border width of portal (border-width property) | | --portal-border-color | currentColor | Border color of portal (border-color property) | | --portal-scale | 0.5 | Amount of scaling of portal (The value of the scale() in the transform property) | | --portal-animation-duration | 0.5s | Time a transition animation (transition-duration property) | | --portal-outline-style | solid | Outline style of portal (outline-style property) | | --portal-outline-width | 1px | Outline width of portal (outline-width property) | | --portal-outline-color | currentColor | Outline color of portal (outline-color property) | | --portal-outline-offset | 0px | Outline offset of portal (outline-offset property) |

* CSS custom properties names have changed in the version 2.0.0 update. (Not compatible with version 1 series)

⚠ Precautions for use

As of December 2020, there is no officially supported browser for the <portal> element. Chrome 87 is supported with chrome://flags/#enable-portals enabled.