Los HTML imports son una nueva característica que tenemos en HTML5, formando parte de los web components y básicamente lo que nos permite es importar documentos HTML dentro de otros documentos HTML.
Existen otros métodos para hacer importaciones, como Ajax, pero con HTML imports lo logramos de una manera más fácil y limpia.
Para importar un documento HTML solo basta con poner la etiqueta link que usamos normalmente para traer hojas estilo (CSS) a nuestro HTML, solo que con unos ligeros cambios:
<link rel="import" href="import.html">
¡Listo!, con esto ya estaríamos importando nuestro documento HTML.
¡Hey!, pero espera ...
Al importar el archivo HTML, le decimos al navegador que busque el contenido de este archivo, pero este no se va a mostrar, a menos que agreguemos un poco de JavaScript.
Supongamos que nuestro proyecto está estructurado de la siguiente forma:
Estructura
*
|-css/
| |-styles.css
|
|-images/
| |-image-1.jpg
| |-image-2.jpg
|
|-javascript/
| |-script.js
|
|-import.html
|-index.html
*
Y que nuestro import.html contiene lo siguiente:
import.html
<h1 id="text">Este es un texto importado</h1>
Para acceder al contenido del HTML importado vamos a utilizar querySelector de la siguiente manera:
Javascript
var html = document.querySelector('link[rel="import"]').import;
Ahora vamos a obtener el contenido de ese HTML (import.html) mediante su ID:
Javascript
var text = html.getElementById("text");
Finalmente, solo queda insertar ese contenido que hemos tomado:
Javascript
document.body.appendChild(text.cloneNode(true));
Estructura HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>HTML Imports</title>
<link rel="import" href="import.html">
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Javascript - Completo
var html = document.querySelector("link[rel='import']").import;
var text = html.getElementById("text");
document.body.appendChild(text.cloneNode(true));
De esta forma, la etiqueta h1 que tenemos en import.html se estaría importando a nuestro index.html.
No uses HTML imports como motor de plantillas
Puede que ahora mismo estés pensando en que los HTML imports son perfectos para organizar tú código y de alguna forma tenerlo mucho más limpio, teniendo archivos diferentes como header.html o footer.html, para importarlos a tu index.html y que tu proyecto este mucho mejor organizado.
Pero recuerda que al usar la etiqueta link para importar tu documento HTML estás realizando una petición al servidor y si empiezas a realizar esto para diferentes archivos, tu sitio web va a terminar siendo muy lento.
El uso de HTML imports es para otro tipo de situaciones como los web components que son un conjunto de tecnologías nuevas de HTML5 para crear nuestras etiquetas personalizadas, dichas tecnologías son:
- Custom Elements
- HTML Imports
- Templates
- Shadow Dom
Así que mejor usa Jade o Handlebars que si son un motor te plantillas.