Use Portals on Chrome Canary

use_portal_on_chrome_canary.md

What is Portals?

It's like an iframe, but can be navigated into.

Explainer: https://github.com/WICG/portals/blob/master/explainer.md Editor's spec draft is here: https://wicg.github.io/portals/

How to use Portals

As of today (Mar 24, 2019) you'll need to use Chrome Canary with --enable-features=Portals command line flags.

It can'be created as an embedded HTML element like iframe (e.g. by <portals> or portal = document.createElement(“portal”);), and a user can then be navigated into it (e.g. the element expands to the top frame) when its activate method is called.

Super simple example:

// Create a portal with the wikipedia page, and embed it
// (like an iframe). You can also use <portal> tag instead.
portal = document.createElement('portal');
portal.src = 'https://en.wikipedia.org/wiki/World_Wide_Web';
portal.style = '...';
document.body.appendChild(portal);


// When the user touch the preview (embedded portal):
// do fancy animation, e.g. expand ...
// and finish by doing the actual transition
portal.activate();

For a more elaborated example with an animation, please see Yusuke's blog (Japanese, but scrolling down will let you get an example with an animation showing how it works): https://blog.uskay.io/article/002-hands-on-portals https://blog.uskay.io/img/article/002-004.gif

The same code can be tested here (open it with Chrome Canary with --enable-features=Portals): https://uskay-portals-demo.glitch.me/