# data[].attributes.body
Los Web Components necesitan ejecutar JavaScript para casi todas las tecnologías que utilizan, pero aparentemente Google está mejorando la indexación mediante la ejecución de JavaScript, permitiendo que los Web Components sean indexados.

# data[].attributes.body
Actualmente, no todos los navegadores soportan todas las tecnologías necesarias para que funcionen, sin embargo hay tres frameworks que, mediante polyfills, permiten hacerlos interoperables entre todos los navegadores, son:
-POLYMER
-X-TAG
-BOSONIC

# data[].attributes.body
Para poder empezar a usar un Web Component, sólo tenemos que importarlo desde la cabecera o etiqueta head de la página que lo vaya a usar mediante la siguiente etiqueta:

<link rel="import" href="ejemplo-componente.html">

# data[].attributes.body
ya hemos visto que podemos usarlos para encapsular el uso de APIs de JavaScript externas como Google Maps y para extender el comportamiento de elementos nativos.
Otro uso es el de añadir marcado semántico o incluso contenido

# data[].attributes.body
Los componentes web fueron introducidos por Alex Russell en la conferencia Fronteers Conference de 2011.

# data[].attributes.body
Las plantillas HTML tienen soporte en Google Chrome, Mozilla Firefox, Edge de Microsoft, Safari y Ópera.​
La compatibilidad con la versión inicial de elementos personalizados y Shadow DOM, conocida como "v0", está presente en algunos navegadores basados en Blink como Google Chrome y Opera, y en Mozilla Firefox

# data[].attributes.body
es una herramienta para incluir documentos HTML y componentes web de fuentes externas sin necesidad de utilizar peticiones AJAX y métodos similares.

# data[].attributes.body
En el primer caso, podrías combinar una hoja de estilos con la otra, con la tranquilidad de saber que no habrá conflictos entre ellas, al estar limitadas por el shadow boundary

# data[].attributes.body
Si sigues alguna corriente de CSS tipo OOCSS o similares, por lo que empleas preferentemente selectores de clase, sin prácticamente selectores descendentes

# data[].attributes.body
Al hablar de las etiquetas personalizadas afirmaba que la Programación Orientada a Objetos llegaba a HTML, y no sólo lo hacía por la posibilidad de extender elementos sino porque ahora también es posible la encapsulación

# data[].attributes.headline
1. CUSTOM ELEMENTS-ETIQUETAS PERSONALIZADAS 

# data[].attributes.subject
1. CUSTOM ELEMENTS-ETIQUETAS PERSONALIZADAS 

# data[].attributes.body
Ahora cualquiera puede crear su propia etiqueta y marcar de forma más semántica y sencilla lo que de otro modo sería, muy probablemente, una sopa de divs. Te pondré el ejemplo que he visto más veces: un mapa de Google.

# data[].attributes.body
Nos permite definir un código HTML preparado para ser usado cuando sea necesario pero que no se activa hasta ese momento, para el navegador no existe.

# data[].attributes.body
En cuatro tecnologías:

Custom Elements

HTML Template

Shadow Dom

HTML imports

# data[].attributes.body
consiste en distintas tecnologías independientes como en widgets de interfaz de usuario reusables que son creados usando tecnología Web abierta.