La evolución de los Web Components sigue siendo un camino lento y con pocas novedades significativas en el último año. Al revisar el estado actual en 2020, nos encontramos con que muchas de las tecnologías que esperábamos que despegaran siguen estancadas o incluso desapareciendo del panorama.
Una de las noticias más claras es la muerte definitiva de HTML Imports. Este estándar, que ya estaba prácticamente abandonado en 2019, ha dejado de estar soportado incluso en navegadores como Opera, que hasta entonces mantenía cierta compatibilidad. Solo algunos navegadores móviles mantienen soporte, aunque sin actualizaciones claras. Por lo tanto, podemos dar por cerrado ese capítulo.
En cuanto a los navegadores, el cambio más relevante ha sido la transición de Microsoft Edge al motor Blink, el mismo que usa Google Chrome. Esto significa que ahora Edge soporta muchas de las tecnologías que antes solo funcionaban en Chrome, como Custom Elements y Shadow DOM, sin necesidad de polyfills. Sin embargo, las versiones antiguas de Edge, basadas en su motor original, siguen presentes en algunos entornos y requieren mantener los polyfills para asegurar compatibilidad.
Sobre los estándares emergentes, HTML Modules sigue siendo una promesa para el futuro, permitiendo importar HTML directamente dentro de módulos ECMAScript, algo que hoy en día solo podemos simular con herramientas como Webpack. Además, ha surgido la propuesta de CSS Modules, que permitiría importar CSS de forma nativa y asociarlo directamente a Shadow DOM mediante atributos como adoptedStyleSheets. Sin embargo, esta propuesta está aún en incubación y ningún navegador la soporta actualmente.
Respecto a Shadow DOM V1, no ha habido cambios importantes. Su soporte es estable en los navegadores modernos, y ya no es necesario usar polyfills en la mayoría de los casos, salvo para navegadores antiguos o versiones previas a Blink. Safari sigue siendo un caso particular, con un comportamiento algo errático a pesar de compartir base con otros navegadores WebKit.
En resumen, el panorama de los Web Components en 2020 es muy parecido al de 2019. La principal novedad es la adopción de Blink por parte de Edge, que mejora la compatibilidad sin necesidad de polyfills en ese navegador. Pero para mantener soporte en versiones antiguas y otros navegadores, seguimos dependiendo de polyfills y herramientas externas.
Para quienes desarrollamos con Web Components, esto implica que debemos seguir siendo cautelosos y mantener nuestras estrategias de compatibilidad, especialmente si nuestro público usa navegadores antiguos o versiones previas de Edge. La esperanza está en que los estándares como HTML Modules y CSS Modules maduren y sean adoptados, lo que facilitará la modularidad y el mantenimiento de nuestros componentes en el futuro.
// Ejemplo ilustrativo de cómo se podría usar adoptedStyleSheets con CSS Modules en el futuro
import styles from './mi-estilo.css' assert { type: 'css' };
class MiComponente extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [styles];
shadow.innerHTML = `<p>Hola, mundo con estilos importados</p>`;
}
}
customElements.define('mi-componente', MiComponente);
Aunque este código no es funcional hoy en día en ningún navegador, refleja la dirección hacia la que podrían ir las cosas cuando CSS Modules y la integración nativa de estilos en Shadow DOM estén disponibles.
Mientras tanto, seguimos atentos a las actualizaciones de los navegadores y a la evolución de los estándares para aprovechar las mejoras cuando estén listas.