# data[].attributes.body
Rolando  Quezada
Centro Educativo Santo Domingo
Profa.: Guadalupe Espinosa
XII B

# data[].attributes.body
Web Components constiste en distintas tecnologías independientes. Puedes pensar en Web Components como en widgets de interfaz de usuario reusables que son creados usando tecnología Web abierta. Son parte del navegador, y por lo tanto no necesitan bibliotecas externas como jQuery o Dojo. Un Web Component puede ser usado sin escribir código, simplemente añadiendo una sentencia para importarlo en una página HTML. Web Components usa capacidades estándar, nuevas o aún en desarrollo, del navegador.

# data[].attributes.body
Web Components consiste en estas cuatro tecnologías (sin embargo cada una puede ser usada por separado):

Custom Elements (Elementos personalizados)

HTML Templates (Plantillas HTML)

Shadow DOM (DOM oculto)

HTML Imports

# data[].attributes.body
Los Custom Elements son una característica que permite crear tus propios elementosHTML personalizados. Pueden tener un comportamiento personalizado y estilos CSS propios. Son una parte de los Web Components, pero también pueden ser utilizados independientemente. Los Custom elements sólo se han estabilizado recientemente, y partes de MDN todavía contienen información desactualizada de las APIs de los antiguos borradores de la especificación.

# data[].attributes.body
El elemento HTML <template> es un mecanismo para mantener el contenido del lado del cliente que no se renderiza cuando se carga una página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución empleando JavaScript.

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.

# data[].attributes.body
Shadow DOM es una de las partes del standard de WebComponents que define el W3C. ¿Qué es exactamente y para que sirve el Shadow DOM?. Para entenderlo vamos a ver un bloque de código aparentemente sencillo.

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.

# data[].attributes.body
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">

# data[].attributes.body
Web Components no están implementados completamente en todos los navegadores todavía, y por lo tanto para usarlos en la mayoría de navegadores (enero de 2015) probablemente necesitarás usar polyfills para rellenar los huecos en la cobertura de los navegadores. Hay disponibles polyfills en el proyecto Google Polymer . Para saber que navegadores implementan Web Components ver ¿Estamos Componentizados ya?

# data[].attributes.body
Con Web Components, puedes hacer casi cualquier cosa que pueda ser hecha con HTML, CSS y JavaScript, y puede ser un componente portable que puede ser reutilizado fácilmente.

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.

# data[].attributes.body
Lo primero que debemos hacer es importar la librería webcomponents.js, que es un Polyfill desarrollado por el mismo equipo de Polymer para que los web components sean compatibles en navegadores que aún no lo soportan nativamente.

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.

# data[].attributes.body
Para comenzar vamos a describir los estados de un componente que definen su ciclo de vida:

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

# data[].attributes.body
Los Web Components son una tecnología incipiente que va a cambiar el modo con el que se desarrollan las aplicaciones para navegadores. Ya hemos empezado a hablar sobre ellos en otras ocasiones en el Manual de Web Components, así que nos centraremos ahora en un tema específico y clave para los desarrolladores, como es su ciclo de vida.

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

# data[].attributes.headline
Cómo realizar Custom Elements con Javascript básico

# data[].attributes.subject
Cómo realizar Custom Elements con Javascript básico

# data[].attributes.body
Los Custom Elements no son algo totalmente ajeno al HTML tradicional. Si lo ves bien, un ejemplo de Custom Element que conocemos de toda la vida es una etiqueta SELECT, que permite definir por medio de un código HTML sencillo un componente que tiene un comportamiento propio: lo pulsamos y nos permite ver varias opciones sobre las que podemos escoger una o varias. Esos SELECT los podemos agrupar con otros campos para hacer componentes mayores, como serían formularios. Obviamente, esos elementos existen desde toda la vida y no los habíamos entendido desde la perspectiva de los web components, pero nos hacen entender bien en qué se basa esta novedad de los custom elements.

# data[].attributes.attachment_link.title
Creación Web Components con Javascript estándar

# data[].attributes.body
omo Web Components es un estándar, podemos desarrollar directamente con Javascript y no estaremos obligados a usar alguna librería o framework adicional. En este manual nos centraremos en esta posibilidad, usar Web Components con Javascript estándar.

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.

# data[].attributes.body
Los componentes, también llamados Custom Elements, son el corazón y objetivo final de este estándar y tienen como objetivo construir nuevos elementos para el lenguaje HTML. Éstos son como etiquetas HTML nuevas que puedes desarrollar tú mismo con muy poco esfuerzo, de modo que puedas realizar componentes para implementar cualquier tipo de tarea en el ámbito de una web, interfaz de usuario, etc.

# data[].attributes.body
En el año 2014 vimos como el desarrollo de aplicaciones web se estaba “componetizando”. Con el impulso de React y Polymer, esta nueva forma de desarrollar se está popularizando.

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.

# data[].attributes.attachment_link.title
Google I/O 2014 - Polymer and Web Components change everything you know about Web development

# data[].attributes.body
Los web components surgieron como propuesta por parte de Google a la W3C, prácticamente a la par que el framework MVC de JavaScript AngularJS, también creado por la compañía del buscador. En este framework se presentaba el concepto de “directiva”, en el que podíamos crear etiquetas HTML propias para encapsular un marcado HTML con su propio ámbito de ejecución.

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.

# data[].attributes.body
En este artículo he buscado explicar, de forma general, en qué consisten los Web Components y por qué, pese a que aún están en una fase muy temprana de su evolución, pueden suponer una auténtica revolución en el mundo del desarrollo web.

# data[].attributes.body
Las capacidades de Web Components están deshabilitadas por defecto en Firefox. Para habilitarlas, ve a la página about:config y descarta cualquier aviso que aparezca. Busca la preferencia llamada dom.webcomponents.enabled, y dale el valor true.

# data[].attributes.headline
Cómo extender unos componentes a base de otros componentes

# data[].attributes.subject
Cómo extender unos componentes a base de otros componentes

# data[].attributes.body
Creemos que el concepto de extensión se debe entender, pero queremos insistir en ello porque es una de las principales filosofías de trabajo que nos traen los Web Components. Básicamente, este estándar se ha creado de manera que permita que los desarrolladores extiendan el HTML, creando aquellos nuevos elementos esenciales para realizar su tarea.

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.