@saekitominaga/customelements-portal

Animated motion <portal> by Custom Elements

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

Demo

• Demo page

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)

• * Specify a value greater than 0, because setting --portal-animation-duration to '0s' disables the detection of 'transitionend' events.
• * CSS custom properties names have changed in the version 2.0.0 update. (Not compatible with version 1 series)

⚠ Precautions for use

As of October 2022, there is no officially supported browser for the <portal> element (Can I use...). Chrome is supported with chrome://flags/#enable-portals enabled.