Las principales características de los componentes web son 4 y pueden utilizarse juntas o por separado:
Elementos personalizados - APIs para definir elementos HTML nuevos.
Sombra DOM - DOM y estilos encapsulados, con composición.
Importaciones de HTML - Métodos declarativos para importar documentos HTML a otros documentos.
Plantillas de HTML - El elemento <template> que permite que los documentos contengan trozos inertes del DOM.
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.[2]
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. La consecuencia de esto es que para el CSS incluido en el shadow DOM de un elemento en particular los elementos HTML pueden ser encapsulados sin el riesgo de que los estilos CSS se filtren y afecten a los elementos que no se suponía que afectaran. Aunque estos elementos están encapsulados en HTML y CSS, todavía pueden disparar eventos que pueden ser recogidos por otros elementos del documento.[3][4]
El subárbol incluido en un elemento se llama shadow tree. El elemento al que se adjunta el Shadow tree es un Shadow host.
Shadow DOM siempre debe estar conectado a un elemento existente, ya sea adjuntandolo como elemento literal o mediante scripting. En JavaScript, el Shadow DOM se une a un elemento utilizando Element. attachShadow ().[5]
La capacidad de incluir HTML y CSS es esencial para la creación de elementos personalizados. Si el shadow DOM no existiese, diferentes elementos personalizados externos podrían interactuar de forma indeseada.
Importar HTML
HTML import es una herramienta para incluir documentos HTML y componentes web de fuentes externas sin necesidad de utilizar peticiones AJAX y métodos similares.[6]
La sintaxis para hacer una importación HTML es la siguiente:
<linkrel="import"href="mydocument.html">
Para evitar cargar y ejecutar dos veces los scripts que se introducen a través de las importaciones, la importación HTML omite cargar y ejecutar archivos previamente cargados.[7]
Mozilla Firefox no tiene soporte para importación de HTML y no pretende implementarlo.[8][9]
La importación HTML también está relacionada con la idea inicial en el desarrollo del hipertexto llamada Transclusión, donde todo o parte de un documento se inserta en otro por referencia.
Plantillas HTML
La plantilla HTML es una forma de crear fragmentos de inserción de HTML que se usan a voluntad. La sintaxis de las plantillas HTML tiene este aspecto:
<html><template><p>The HTML you wish to instantiate on will</p></template></html>
Los scripts no se ejecutarán, y los recursos que están dentro de una plantilla no serán recuperados hasta que la plantilla sea eliminada.[10]
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 (requiere un cambio de configuración manual). Los nuevos elementos personalizados y las APIs "v1" de Shadow DOM están siendo implementadas en Safari 10,[12] Google Chrome (53.0.2785), y en desarrollo en Mozilla Firefox. Microsoft Edge aún no ha comenzado a implementar Custom Elements o Shadow DOM.[13]
La compatibilidad con navegadores más antiguos está implementada utilizando polyfills basado en JavaScript.
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.[14]
Historia
Los componentes web fueron introducidos por Alex Russell en la conferencia Fronteers Conference de 2011.[15]
Polymer, una biblioteca basada en componentes web, fue liberada por Google en 2013.[9]
