Cuando nos adentramos en el mundo de Web Components, nos encontramos con un conjunto de tecnologías que, aunque prometedoras, han tenido un recorrido lleno de cambios y adaptaciones. En este recorrido, hemos explorado elementos como Shadow DOM, Custom Elements y HTML Templates, además de aspectos relacionados con el CSS Scope, especialmente el uso del selector :host para dar formato a un Shadow DOM. Sin embargo, hay otras tecnologías que, aunque en su momento parecían revolucionarias, hoy en día han quedado obsoletas o en desuso, y es importante entender por qué.
Una de estas tecnologías es HTML Imports. Hace apenas un par de años, HTML Imports nos permitía importar documentos HTML dentro de otros usando la etiqueta <link rel="import">. Esto parecía una solución sencilla y elegante para reutilizar componentes HTML, ya que podíamos tener fragmentos de código en archivos separados y luego importarlos directamente en nuestra página principal. Por ejemplo, podríamos tener un archivo index.html que importara otros dos archivos HTML con componentes específicos, facilitando la modularidad y reutilización.
<!-- index.html -->
<link rel="import" href="componente1.html">
<link rel="import" href="componente2.html">
Sin embargo, esta tecnología nunca llegó a consolidarse. Su soporte fue limitado principalmente a Google Chrome, y con el tiempo incluso Chrome retiró esta funcionalidad. Otros navegadores como Firefox nunca la adoptaron oficialmente, y aunque en algún momento se podía activar mediante flags experimentales, finalmente también la eliminaron. Esto significa que HTML Imports está en camino de desaparecer completamente, y su uso se limita a contextos muy específicos o a proyectos antiguos.
El reemplazo natural que se plantea para HTML Imports son los HTML Modules, una tecnología que aún está en desarrollo y que se basa en los módulos ES6. Los módulos ES6 han supuesto una revolución en la forma en que gestionamos el código JavaScript, permitiendo importar y exportar funcionalidades de manera nativa en los navegadores modernos. La sintaxis es clara y elegante, y su soporte está bastante extendido en navegadores como Edge, Firefox y Chrome.
Un aspecto interesante de los módulos ES6 es que podemos usar la etiqueta <script type="module"> para indicar que ese script debe ser tratado como un módulo. Los navegadores que no soportan esta característica simplemente ignoran el script, lo que garantiza compatibilidad hacia atrás sin romper la experiencia en navegadores antiguos.
<script type="module">
import { miFuncion } from './modulo.js';
miFuncion();
</script>
La idea detrás de HTML Modules es que podamos importar fragmentos HTML como si fueran módulos, y que estos se conviertan en nodos DOM que podamos insertar directamente en nuestro documento. Sin embargo, esta funcionalidad todavía no está disponible de forma nativa ni mediante polyfills confiables. Por ejemplo, al intentar importar un archivo HTML con la sintaxis de módulos en navegadores como Firefox Nightly, recibimos un error porque el navegador no reconoce el tipo de archivo como un módulo válido.
Mientras tanto, para manejar la importación de archivos HTML en proyectos modernos, recurrimos a herramientas como Webpack. Estas herramientas procesan los archivos HTML y los convierten en cadenas de texto o en objetos manipulables dentro de JavaScript, lo que nos permite simular la importación de componentes HTML. Aunque esto funciona, no es lo mismo que tener soporte nativo para HTML Modules, ya que implica una capa adicional de procesamiento y no una integración directa en el navegador.
En definitiva, el ecosistema de Web Components sigue evolucionando, y aunque algunas tecnologías han quedado en el camino, otras están emergiendo para ofrecer soluciones más robustas y compatibles. Por ahora, debemos adaptarnos a las herramientas y estándares que los navegadores soportan, y estar atentos a las novedades que puedan facilitar la modularidad y reutilización de componentes HTML en el futuro.