Cómo utilizar El Import En HTML

Los Web Components han recorrido un largo camino desde que se introdujo el concepto por primera vez, pero uno de los aspectos de los componentes que realmente podría cambiar la forma del código de los sitios web es el Import En HTML.

Esta forma de trabajar nos permite importar documentos HTML a otros documentos HTML. Esto se logró con el uso de Ajax, pero el Import En HTML es un método más limpio.

Compatibilidad Del Navegador

EL Import En HTML es una tecnología reciente y desde el momento que se escribio, sólo se admite en Chrome 31 y las siguientes versiones. Incluso,  estára obligado a activar la función. Para ello tienes que ir a chrome://flags/ y habilitar «Enable HTML Imports» y luego reiniciar el navegador web y ya está listo para ser usado este web component. Afortunadamente también hay una Polyfill para Importaciones HTML que usted puede encontrar en Github.

Importaciones HTML son una forma de incluir y reutilizar documentos HTML en otros documentos HTML.

Usando HTML Import

Si se piensa en ello, estamos listos para usar las importaciones en nuestras hojas de estilo y archivos JS; esto no es más que otro tipo de importación y la sintaxis es similar a la forma en que importamos «normalmente», en la cabecera del documento:

[html]<link href="import/post.html" rel="import" />[/html]

Obteniendo El Contenido

Cuando se importa un archivo HTML que está diciendo al navegador que hay que  ir a buscar el contenido de ese archivo para que se puede utilizar, pero no se muestra automáticamente en el documento; se necesita escribir algo de simple JavaScript  para esto:

[js]var post = document.querySelector(‘link[rel="import"]’).import;[/js]

Esto hará que el contenido del archivo post.html sea importado en nuestra página, vamos a suponer que el archivo post.html se ve así:

[html]

<article class="post">
<h2>A Post Title</h2>
<p><span>Written by: Admin</span></p>
<p>If you run a business and want a professional first point of contact or just need a hand with some of the day to day to business tasks because things are getting a bit busy, then we can help.</p>
</article>

[/html]

Ahora tenemos que obtener el contenido de la página y seleccionar el artículo y colocarlo en nuestra página:

[js]

var post = document.querySelector(‘link[rel="import"]’).import;
var article = post.querySelector(‘.post’);
document.body.appendChild(article.cloneNode(true));

[/js]

En este caso importamos un contenedor en lugar de importar directamente en el body de manera que encaja perfectamente en nuestra aplicación . Es todoa una cuestión de elección y jugar un poco con el JS, para insertar el código HTML en un cierto elemento hay que hacer algo como lo siguiente:

[js]

var post = document.querySelector(‘link[rel="import"]’).import;
var article = post.querySelector(‘.post’);
var clone = document.importNode(article.content, true); document.querySelector(‘#container’).appendChild(clone);

[/js]

Como se puede ver, en este caso lo clonamos y añadimos luego a un elemento.

Finalmente

El Import En HTML nos ofrece una gran manera de construir mejores sitios web y organizar las aplicaciones, tiene una API fácil de manipular y cada vez mas se esta aplicando el soporte para el uso de este elemento.