# data[].attributes.body
Mapa de Google.
Si no usamos Web Components, cuando queremos mostrar un mapa en una página web, tenemos que crear código en tres bloques:

1. HTML con el elemento donde se va a renderizar el mapa

2. CSS para definir estilos, por ejemplo dimensiones

3. JavasScript para generar el mapa, indicando las coordenadas que deseas visualizar asi como otros detalles de configuración.

# data[].attributes.body
Un calendario

1. HTML para crear el elemento donde se mostrará el calendario

2. CSS para indicar las dimensiones de ese calendario, colores, y otros estilos

3. JavaScript para especificar día, mes, año…

# data[].attributes.body
Sin Web Components, para agrupar estos bloques se usaba generalmente la etiqueta IFRAME.

A partir de ahora, gracias a los Web Components podemos expresar un mapa de Google con una etiqueta que simplifica la tarea y la acorta a un pequeño bloque independiente:

# data[].attributes.body
Construidas sobre componentes web con el objetivo de aumentar el nivel de abstracción al crear elementos personalizados. Cuatro de las bibliotecas más importantes son: X-Tag, Slim.js, Polymer y Bosonic.

# data[].attributes.body
Dos de ellos, Bosonic y Polymer, proporcionan componentes listos para usar. Estos componentes se pueden utilizar indistintamente, ya que todos ellos están construidos con tecnologías web abiertas.

# data[].attributes.body
Los componentes web fueron introducidos por Alex Russell en la conferencia Fronteers Conference de 2011.
Polymer, una biblioteca basada en componentes web, fue liberada por en 2013.

# data[].attributes.body
Chrome Firefox

# data[].attributes.body
Este sistema permite tener una parte del DOM oculta a otros bloques de la página. Se dice comúnmente que estamos encapsulando parte del DOM para que no interfiera con otros elementos de la página.

# data[].attributes.body
Con el Shadow DOM podemos hacer que los componentes tengan partes que no estarían visibles desde fuera, pudiendo colocar estilos que solo afectan al Shadow DOM de un web component y evitando que estilos de la página sean capaces de afectar al Shadow DOM.

# data[].attributes.body
Permite importar un pedazo de código que podrás usar en un lugar de tu página. Ese código podrá tener HTML, CSS y Javascript. El HTML no se visualizará directamente en la página, pero lo podrías acceder con Javascript e inyectar en algún lugar.

# data[].attributes.body
"HTML Imports", realmente sirve para cargar de una manera única tanto HTML como CSS como Javascript. Además podrás tener dentro un "HTML Template", con las ventajas que ellos aportan. Mendiante código Javascript seremos capaces también de registrar componentes personalizados "Custom Elements" o realizar otro tipo de acciones sobre el contenido de la página que sean necesarias.

# data[].attributes.body
Los templates pueden contener tanto HTML como CSS que inicialmente no se mostrará en la página. El objetivo es que con Javascript se acceda al código que hay dentro del template, se manipule si es necesario y posteriormente se incluya, las veces que haga falta, en otro lugar de la página.

# data[].attributes.body
Hay dos: autónomos e integrados. Autónomos: son elementos HTML completamente diferenciados de los elementos HTML nativos, se construyen esencialmente desde abajo hacia arriba utilizando la API de elementos personalizados.

# data[].attributes.body
Actualmente, el navegador que más soporte da es Chrome. Para otros navegadores, como Firefox o Edge, es recomendable usar algún tipo de Polyfil.

# data[].attributes.body
Enfocado a la creación de todo tipo de componentes utilizables en una página web, para realizar interfaces de usuario y elementos que nos permitan presentar información (tecnologías que se desarrollan en el lado del cliente).

# data[].attributes.body
Se compone de 4 sub-elementos complementarios, pero independientes entre si:

Custom Elements (elementos personalizados)

Templates (plantillas)

Shadow DOM (DOM oculto)

HTML Imports

# data[].attributes.body
CANDY CHEN LUO

INFORMÁTICA

PROFE.: GUADALUPE ESPINOSA

NIVEL: XII°B

# data[].attributes.body
Son un conjunto de características que actualmente están siendo añadidas por el W3C a las especificaciones HTML y DOM de forma que permite la creación de widgets o componentes reutilizables en documentos y aplicaciones web.

# data[].attributes.body
Integrados: son elementos que se construyen sobre elementos HTML nativos para reutilizar su funcionalidad.

# data[].attributes.body
Con los custom elements, la comunidad puede crear sus propios elementos, de forma rápida y colaborativa.

# data[].attributes.body
De todos modos, para saber el soporte en el momento actual una rápida consulta a Caniuse.com te ofrecerá la información actualizada.