Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production. The <portal>

<portal>: The Portal element

submited by
Style Pass
2024-11-22 09:00:03

Experimental: This is an experimental technology Check the Browser compatibility table carefully before using this in production.

The <portal> HTML element enables the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages.

A <portal> is similar to an <iframe>. An <iframe> allows a separate browsing context to be embedded. However, the embedded content of a <portal> is more limited than that of an <iframe>. It cannot be interacted with, and therefore is not suitable for embedding widgets into a document. Instead, the <portal> acts as a preview of the content of another page. It can be navigated into therefore allowing for seamless transition to the embedded content.

The preview displayed by a <portal> is not interactive, therefore does not receive input events or focus. Therefore the embedded contents of the portal are not exposed as elements in the accessibility tree. The portal can be navigated to and activated like a button, the default behavior when clicking on the portal is to activate it.

Leave a Comment