¿Qué son los Web Components?

alt

Web Components

Estos son un conjunto de 4 estándares que nos generan el encapsulado de un componente de nuestra página web que podremos reutilizar una y otra vez.

Para poder entenderlo mejor, podemos tomar el ejemplo de la imagen de arriba, donde podemos observar que hay algunos elementos encerrados en cuadros rojos, esos serían un ejemplo de un componente web, donde cada vez que necesitemos un menú solo mandamos llamar ese menú encapsulado, o lo mismo si necesitamos una cabecera, o algún contenedor principal, en vez de hacer el código de cero en cada proyecto, solo mandamos llamar esos componentes que ya están hechos y listos para re-utilizar en cualquier otro proyecto.

Web Components Standards:

Los Web Components consisten de estos 4 estándares web, los cuales explicaré a continuación:

Custom Elements:

HTML5 nos sorprendió con la posibilidad de poder contar con etiquetas más personalizadas, dándonos el poder para evitar hacer toda una sopa de div's en nuestros proyectos como este ejemplo:

Gmail código

y de esa manera ayudándonos a poder crear un código mucho más limpio, fácil de mantener y compartir con nuestro equipo de desarrollo o comunidad.

Estas nuevas etiquetas nos ayudan a darle una mejor estructura a nuestra página, indicando cual es el <header>, el <footer>, el <main>, el <menu>, etc.

HTML5 tags

Pero aun así, esto no nos resolvió del todo el problema de terminar con código difícil de leer o entender al final del proyecto.

Ahora, ¿qué pasaría si pudiéramos crear nuestras propias etiquetas?, ¿si tuviéramos el poder de hacer una etiqueta personalizada que ya tenga mi estilo y estructura que requiera, lista para utilizarla en mi proyecto justo como utilizo cualquier otra etiqueta?.

Para eso nos ayudan los Custom Elements, este estándar nos permite crear nuestras propias etiquetas, como por ejemplo en caso de que yo quiera crear un súper botón que tenga animación e interacción diferente al que tiene la etiqueta de <button> podría crear mi etiqueta de súper botón y utilizarlo en mi proyecto de la misma forma en que ocupo cualquier otra etiqueta.

Custom Element

Awesome right? :D

La única regla para poder generar un Custom Element, es que la etiqueta debe llevar por lo menos 2 palabras separadas por un " - " como se enseña en la imagen de arriba.

Shadow DOM:

Mucho se a escuchado en estos días del Shadow DOM, pero a pocos aun les queda claro ¿qué es? y ¿para que nos ayuda?

El Shadow DOM es código (HTML, CSS y JS) encapsulado dentro de un elemento (Custom Element), y se puede entender que es un DOM oculto que vive dentro del DOM principal.

Whaat!?
Mind blow

Este tema no es nuevo e incluso es algo que ya hemos utilizado anteriormente en otros elementos, como por ejemplo la etiqueta de <video>, al momento que utilizamos esta etiqueta para poder mostrar un video en nuestro proyecto, nosotros no nos preocupamos por dar estilos a la ventana de reproducción que muestra nuestro video, ni tampoco tenemos que trabajar en poner los controles ni la barra del tiempo, todo eso es algo que ya viene por default con la etiqueta, nosotros simplemente vinculamos el video, le damos dimensiones al reproductor y todo lo demás al momento de renderizar el DOM ya está ahí.

Pero esto no es magia, todos esos elementos por default no aparecen solo por que sí, esa etiqueta tiene un DOM oculto, que es el encapsulado del código que da todo el estilo e interacción al momento de renderizar nuestro proyecto en el navegador

Para poder entender esto, voy a inspeccionar en chrome la etiqueta de <video>

Video tag

y aquí, podremos ver remarcado en gris el DOM oculto (Shadow DOM) que nos aparece como #shadow-root

Todo ese código, es el código que viene encapsulado en ese elemento, y ese código puede coexistir con el DOM principal sin ocasionar problemas con el mismo.

Shadow DOM + Custom Elements

Cual puede ser un buen ejemplo de como podemos mezclar el Shadow DOM con un Custom Element

Un ejemplo simple es el uso Google Maps, si nosotros queremos renderizar un mapa de google en nuestro proyecto, tendríamos que hacer algo similar a esto:

Google Maps

Pero, se mucho más sencillo utilizar una elemento (etiqueta) que ya lo tenga encapsulado, y esto es de la siguiente manera:

En donde solo por utilizar esa etiqueta, el navegador obtenga ese DOM oculto por default, y nos muestre el mapa en nuestra página

HTML Templates:

La etiqueta de <template> nos permite crear una plantilla en HTML vacía que después podremos clonar o reusar, esto nos habilita para definir un código HTML preparado para ser usado cuando sea necesario, pero que se activará hasta ese momento, para el navegador ese pedazo de código no existe, y es importante enfatizar este punto ya que quiere decir que recursos como imágenes, videos, scripts, etc. no se descargaran hasta que estos sean necesarios.

Un ejemplo de como utilizar la etiqueta de <template>.

Imaginemos que queremos crear una tabla con el cast de nuestra serie favorita, para hacerlo en HTML:

Pero, ¿qué pasaría si vemos que el cast tiene más de 70 actores? :O, ¿tendríamos que hacer una linea por cada uno de ellos?

Bueno, para ello podemos resolverlo de la siguiente manera, usando el sistema de plantillas:

y después nos preparamos para clonar y rellenar los campos con JavaScript como se muestra a continuación.

Pero aun así, tenemos una forma más fácil de resolver esto, y es ocupando el sistema de plantillas que nos proporciona Polymer con sus Web Components.

HTML Imports:

En un documento HTML tenemos la forma de mandar llamar documentos CSS, JS, videos, imágenes, audios, pero no había una forma de mandar llamar otro documento HTML. Ahora con el HTML Import estándar, ya nos es posible vincular documentos HTML en nuestro proyecto.

Esto lo logramos con la siguiente linea:

y la forma correcta de hacerlo en un proyecto real la siguiente manera: