# data[].attributes.body
Bibliotecas:
Hay varias librerías que están 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.

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
Historia:
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 Google en 2013

# data[].attributes.body
CARACTERÍSTICAS:
Shadow Dom:
Shadow DOM es una funcionalidad que permite al navegador web renderizar elementos DOM sin necesidad de insertarlos en el árbol principal DOM del documento. Esto crea una barrera entre lo que el desarrollador y el navegador pueden alcanzar; el desarrollador no puede acceder al Shadow DOM de la misma manera que lo haría con los elementos anidados, mientras que el navegador puede renderizar y modificar ese código de la misma manera que lo haría con los elementos anidados.

# data[].attributes.body
CARACTERÍSTICAS:
Elementos personalizados

Hay dos tipos de elementos personalizados: autónomos e integrados. Los elementos personalizados 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. Los elementos personalizados integrados son elementos que se construyen sobre elementos HTML nativos para reutilizar su funcionalidad.

# data[].attributes.body
¿En qué tecnologías consiste?

Custom Elements (Elementos personalizados)

HTML Templates (Plantillas HTML)

Shadow DOM (DOM oculto)

HTML Imports

# data[].attributes.body
¡Para recordar!
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
¿Cómo se puede usar?
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
¿Qué es?
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.