En artículos anteriores hemos relatado qué hay de nuevo con los Web Components y cómo van a revolucionar el desarrollo para la web. Es un nuevo estándar que nos trae cuatro especificaciones para poder construir, en resumen, nuevos elementos o componentes que nos ayudarán a extender el HTML a todos los niveles.

De entre todas las especificaciones ahora vamos a explicar la relacionada con los import, que es la última que nos quedaba por ver en el manual de los Web Components. Se trata de una especificación bastante sencilla que realmente usaremos poco a nivel de Javascript y más a nivel de HTML. Pero mejor vamos directamente con las explicaciones.

Especificación HTML Imports no apoyada

MUY IMPORTANTE: Comenzamos diciendo que esta especificación no fue apoyada de manera mayoritaria por las organizaciones que hay detrás del estándar de Web Components, de modo que no salió a la luz finalmente.

Web Components V0 la introdujo y durante mucho tiempo fue la manera que teníamos de importar componentes, pero finalmente se pensó que era más adecuado usar los imports de Javascript. Se pensó que "Si ya tenemos una manera de importar código con Javascript ES6, ¿Para qué necesitamos otra manera de hacer lo mismo desde HTML?"

Finalmente, en Web Components V1, la especificación oficial que salió definitivamente a la luz y que hoy nos beneficiamos ya en todos los navegadores, se decidió importar siempre usando los imports de Javascript.

Por qué necesitamos un "import" en HTML

Cuando desarrollamos tradicionalmente del lado del cliente nos valemos del lenguaje HTML para definir el contenido, del CSS para definir el aspecto y del Javascript para la funcionalidad o programación en general. Estos tres lenguajes se pueden escribir en el mismo documento HTML, pero generalmente su código se coloca en archivos independientes por diversos motivos.

Cuando quieres extender el HTML, por medio de lo que tradicionalmente se conoce como plugins (recuerda los plugin de jQuery), generalmente tienes que incluir diversos códigos por separado. Por una parte necesitaremos colocar un poco de HTML que es donde se va a embutir la funcionalidad del plugin, tendrás un script Javascript que colocarás en tu archivo .js del sitio o en el archivo plugins.js junto con otros plugins que quieras usar y por último un poco de CSS que generalmente colocarás en el archivo de estilos globales de tu sitio.

No existe una regla que sea totalmente obligatoria sobre cómo situar esos pedazos de código en tu página y a veces genera un poco de confusión, pero sobre todo dificulta la distribución de plugins y su mantenimiento. Los creadores de los plugins seguramente les gustaría poder decirte "mira, coloca este archivo aquí y no te preocupes por nada más". Pero no pueden porque esas tres porciones de código (HTML + CSS + JS) que tendrás que situar en tu proyecto en lugares diferentes dependiendo de la arquitectura de tu página.

Para ese caso concreto es el que se crea la nueva especificación de los "import". Se trata básicamente de incluir todo lo necesario para distribuir un componente en un único archivo .html. Aunque, a pesar de la extensión no tendrá solo el código HTML para funcionar, sino también sus estilos y su Javascript para darle vida.

En resumen, cuando quieras usar un Web Component en una página web no vas a tener que estar incluyendo los distintos códigos de los distintos lenguajes por separado, simplemente colocarás un único import a tu componente y ya lo tendrás listo para usar. ¿interesante, no?

Como ya sabes lo que es un Custom Element, te aclarará saber que con un Import incluyes todo el código fuente necesario para que el navegador conozca uno de estos elementos personalizados. El import lo haces en la cabecera de la página y luego a lo largo de todo el cuerpo podrás usar la etiqueta que implementa el Custom Element todas las veces que necesites.

Cómo se usan los import

Para realizar un import en un documento HTML se usa la etiqueta LINK que ya existe desde hace tiempo en el lenguaje. Anteriormente LINK te servía únicamente para acceder a una hoja de estilos externa, en un archivo CSS que generalmente enlazas con todas las páginas de tu sitio. Ahora los LINK tendrán la posibilidad de definir su atributo rel="import" y con ello indicas que estás usando esta especificación de Web Components.

El código será como este:

<link rel="import" href="archivo_a_importar.html">

Esta etiqueta ahora permite enlazar con un archivo HTML que, como decimos, puede tener código no solo HTML, sino también CSS o incluso Javascript.

Ahora bien, hacer el import no implica que vayas a mostrar un HTML en un lugar concreto de la página!! No veas el import como si fuera un "include" de un HTML, sino como un enlace a un código que realmente no se va a mostrar donde está situado tu import, sino donde tú lo necesites. Como consecuencia, los import se suelen situar en el HEAD de la página. Allí podremos colocar todos los import que necesitemos en nuestro documento. Luego usaremos los import donde se necesiten, atendiendo a estas reglas fundamentales:

• El HTML de un import no se va a volcar en el sitio donde has definido tu etiqueta LINK. Osea, si colocas un import a un archivo que solo contiene código HTML será como si no colocases nada, ese HTML no aparecerá por ningún sitio, tendrás que volcarlo más tarde con Javascript para que aparezca donde quieras.
• El CSS que haya en un archivo que importes se incluirá como CSS de la página, sumándose al CSS global con la regla de la cascada. Ahora bien, si colocas CSS lo tendrás que incluir con las correspondientes etiquetas STYLE y barra STYLE.
• El Javascript que haya en un import se ejecutará directamente. Pero para colocar un script lo tendrás que hacer dentro de las etiquetas SCRIPT.

Ojo, esto es HTTP

Los import que te traes con la etiqueta LINK rel="import" se acceden mediante HTTP, que es el protocolo de transferencia de las páginas web. Esto es importante porque un import solo funcionará si tu página se accede a través de http://. En definitiva, para que funcionen tendrás que acceder al documento que realiza el import a través de un servidor web.

Para los que ya conocen Javascript de antes, es algo parecido a lo que pasa con las solicitudes Ajax. Realmente es que un import es como si fuera una solicitud Ajax para acceder a otro documento, que el navegador solicita a un servidor web a través del protocolo HTTP.

Contar con un servidor es sencillo y te vale cualquier servidor que puedas conseguir. En último término, si no sabes cómo proveerte de un servidor web, te vale subir los archivos a un espacio de hosting web. Pero si trabajas desde hace tiempo en el mundo web sabrás cómo conseguir un servidor en local, que es lo más adecuado para la etapa de desarrollo. En DesarrolloWeb.com tienes mucha información para conseguir esto.

Ejemplo Javascript para acceder a un import

Terminaremos este artículo con una pequeña práctica sobre Javascript para acceder a un import. El objetivo es no quedarnos solo en el conocimiento teórico, pero hay que remarcar que esta práctica no es realmente habitual en el día a día del desarrollo Web Components. Lo que vamos a hacer es acceder a un código HTML que está dentro de un import para presentarlo en un lugar de la página, pero recuerda que lo normal es que el import te sirva para incluir código en diferentes lenguajes que implementa un Custom Element.

Archivo que vamos a importar: archivo-importar.html
Tenemos primero el archivo que vamos a importar, que contiene código HTML simplemente (insistimos que ésto no es lo más normal).

<p>Esto lo voy a importar de un archivo externo</p>

Archivo que realiza la importación:
Ahora, desde cualquier archivo donde vayamos a importar un elemento, usamos en el HEAD la etiqueta LINK con rel="import" y luego en el href la ruta del archivo a importar.

Recuerda que por hacer el import, ese contenido HTML a importar no se mostrará dentro de la página. Luego en el código veremos el script que nos permitiría acceder al contenido del import para presentarlo en un lugar de la página.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML Imports</title>
	<link rel="import" href="archivo-importar.html" id="miimport">
</head>
<body>
	
	<script>
		//accedo al elemento import con id=miimport
		var importado = document.querySelector("#miimport");

		//accedo al contenido del import
		var contenidoImport = importado.import;

		//accedo a un elemento en concreto del contenido del import
		var elementoDentroImport = contenidoImport.querySelector("p");

		//inyecto ese contenido del import en la página
		document.body.appendChild(elementoDentroImport);
	</script>
</body>
</html>

Como decimos, este código Javascript no deja de ser anecdótico. Se puede hacer esto que ves y el ejemplo funciona, pero no es lo más habitual. El código está comentado para que lo puedas analizar y entender como facilidad. No lo vamos a comentar más porque no es lo que realmente se espera de los import como hemos remarcado hasta la saciedad.

En el siguiente artículo realizaremos un ejemplo de import a un Custom Element que habrá en un archivo .html que contendrá tanto HTML como CSS como Javascript. En el próximo ejemplo, por tanto, sí podrás ver cuál es el uso que se ha pensado para dar a esta especificación de Web Components.