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