<portal>El elemento <portal> es una adición interesante y relativamente nueva en el conjunto de herramientas de HTML5, siendo parte de las propuestas impulsadas por Google para mejorar la navegabilidad y rendimiento de las aplicaciones web. Aunque aún está en fase experimental y no es ampliamente adoptado por todos los navegadores , su propuesta apunta a facilitar transiciones más rápidas y fluidas entre diferentes páginas del mismo sitio o incluso entre diferentes sitios.
<portal>El <portal> tiene algunos atributos que controlan su comportamiento:
src: El atributo src especifica la URL de la página que se cargará dentro del portal. Funciona de manera similar al atributo src en un elemento <iframe>.
<portal src="https://example.com/page"></portal>referrerpolicy: Este atributo define la política de referencia que se aplicará al cargar la página dentro del portal. Al igual que en otros elementos de carga de recursos, puede tener valores como no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, etc.
<portal src="https://example.com/page" referrerpolicy="no-referrer"></portal>loading: Indica la preferencia del método de carga del contenido del portal. Podría tener valores como lazy para cargas diferidas.
<portal src="https://example.com/page" loading="lazy"></portal><portal> en HTML5El uso principal del elemento <portal> está en permitir que una vista previa de una página externa sea integrada e interactuable antes de tomar la decisión de navegar completamente hacia dicha página. Esto puede mejorar considerablemente la experiencia del usuario al proporcionar transiciones más fluidas entre secciones del contenido.
Este ejemplo muestra cómo puedes usar un <portal> para cargar una vista previa de un artículo que podría interesar al usuario. Al hacer clic en el portal, la navegación se completa, llevando al usuario a la página completa.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal Element Example</title>
</head>
<body>
<h1>Check out this article:</h1>
<portal src="https://example.com/article" referrerpolicy="no-referrer" loading="lazy">
<p>Your browser does not support the portal element</p>
</portal>
<script>
const portalElement = document.querySelector('portal');
portalElement.addEventListener('click', () => {
portalElement.activate();
});
</script>
</body>
</html>En este ejemplo:
<portal> para cargar una vista previa de la página https://example.com/article.loading="lazy"), lo que mejora la performance inicial de la página.activate().Este método permite a los desarrolladores ofrecer una vista interactiva y más rápida de los contenidos antes de que el usuario decida si quiere realizar una navegación completa, reduciendo significativamente el tiempo de espera perceptible y mejorando la experiencia de navegación en general.
Vale la pena recordar que <portal> es una característica experimental y los desarrolladores deben verificar su compatibilidad y soporte en los navegadores que esperan utilizar.