A veces hay confusión respecto a Web Components y Google Polymer. Polymer es un framework que está basado en las tecnologías Web Components. Puedes hacer y usar Web Components sin Polymer.

Piensa en la plantilla como un fragmento de contenido que está siendo almacenado para un uso posterior en el documento. Mientras el analizador procesa el contenido del elemento <template> durante la carga de la página, sólo lo hace para asegurar que esos contenidos son válidos; sin embargo, el contenido del elemento no se renderiza.

La solución a este problema pasa por utilizar el Shadow DOM , que es un árbol DOM que se construye en paralelo al árbol original de una parte del documento.

El siguiente bloque de código JavaScript se encarga de generar una estructura ShadowDOM de tal forma que cuando se pulse el botón se genere una estructura Shadow que substituya la estructura original.

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">

Por todo ello es una tecnología que ya podemos usar y beneficiarnos de extraordinarias posibilidades. En este manual vamos a recorrer diversos puntos del estándar para explicarlo, de modo que los desarrolladores puedan aprender y comenzar a usar Web Components.

El ciclo de vida es parte de la especificación de los Web Components y básicamente incluye diversos estados que pueden tener los Custom Elements a lo largo de su existencia. Desde la creación de un componente, su inserción dentro del documento web hasta su retirada

-Created: Ocurre cuando el elemento se crea, pero ojo, no tiene que ver con que el elemento se muestre. Es como su instanciación en memoria de Javascript. Cada elemento de un tipo de custom element generado, lanza el método created.

-Attached: Ocurre cuando un elemento que había en la memoria de Javascript se inyecta dentro de un documento, o sea, pasa a formar parte del DOM de la página.

-Detached: Ocurre cuando un elemento se quita del DOM, se retira del documento y por tanto desaparece de la página.

-Atribute Changed: Ocurre cuando uno de sus atributos cambia de valor.

Esa capacidad de extensión no solo se da con elementos que existan actualmente en el HTML, sino también con otros custom elements. Es algo que vemos continuamente en todos los ámbitos.

AngularJS nos proporciona controladores, enrutado, filtros, servicios, etc, y las directivas estaban ahí, aunque en un principio no eran tan utilizadas. Con el tiempo empezaron a extenderse debido a terceros desarrolladores que compartían, a modo de proyectos Open Source, sus implementaciones. De esta manera, en nuestras aplicaciones podíamos importar estos proyectos y utilizarlos en nuestros desarrollos.

Paralelamente, la W3C trabajaba en el concepto de los web components que bebían mucho de este concepto iniciado en AngularJS.

Seguidamente se importa el componente que queramos emplear, por ejemplo el componente de Google Maps.

Y por último, dentro del BODY, ya podemos usar ese componente.

Creando un web component con Polymer

Para crear un componente web con Polymer, debemos seguir la guía de estilo y buenas prácticas que promueven desde el equipo de Google. Lo primero que necesitamos es crear un archivo HTML con el nombre del componente que queremos desarrollar.

Dentro de ese archivo importamos Polymer para poder utilizar la etiqueta <dom-module> . El id de dom-module y el ‘is’ de la función Polymer deben tener el mismo nombre que el nombre del webcomponent.

Dentro de <dom-module> insertamos la etiqueta <template> para el marcado HTML, el <script> para el código JavaScript y <style> para el CSS del componente.

Ahora se piensa en pequeños componentes con su lógica propia y que poco a poco van formando la estructura de una aplicación, en lugar de un código completo Modelo-Vista-Controlador.

Esta nueva metodología de desarrollo la ha popularizado React, la librería creada por Facebook. React, al contrario que Polymer, no crea por defecto componentes web exportables, si no que componetiza la propia aplicación. Esta es la principal diferencia cuando hablamos de components y web components.

Un component es un pedazo en nuestra aplicación, como puede ser un menú, un header, un navbar, un item,etc. Descomponemos la lógica de nuestra aplicación en estos pequeños contenedores sin que sean exportables para otra aplicación.

En cambio un web component se entiende que exporta un API o un servicio de terceros, como puede ser <google-map> o <youtube-video>, o una pasarela de pago como puede ser PayPal o Stripe por medio de unas etiquetas HTML.

Angular por su parte está tendiendo a esta forma de programar. Su nueva versión 2.0 sigue esta metodología de creación de componentes, y en sus versiones 1.x (en concreto la 1.4, la 1.5 que está en fase beta y la futura 1.6) tienden hacia eso.

Desde el equipo de Ingeniería de PayPal se está desarrollando/orientando a directivas, para encapsular dentro de ellas el templating y los controladores. Después en el routing, en lugar de indicar un templateUrl con un HTML y un controlador, se indica la directiva que se quiera cargar para una determinada URL.