Los componentes web son un conjunto de características que proporcionan un modelo de componentes estándar para la web [1], lo que permite la encapsulación y la interoperabilidad de elementos HTML individuales . Los componentes web son un enfoque popular a la hora de crear microfrontends .
Las principales tecnologías utilizadas para crear componentes web incluyen: [2]
Los elementos personalizados tienen dos partes: elementos personalizados autónomos y elementos integrados personalizados. Los elementos personalizados autónomos son elementos HTML que están completamente separados de los elementos HTML nativos ; se construyen esencialmente desde abajo hacia arriba utilizando la API de elementos personalizados . Los elementos integrados personalizados son elementos que se construyen sobre elementos HTML nativos para reutilizar su funcionalidad. [4]
El Shadow DOM es una funcionalidad que permite al navegador web representar elementos DOM sin colocarlos en el árbol DOM del documento principal. 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 elementos anidados, mientras que el navegador puede representar y modificar ese código de la misma manera que lo haría con elementos anidados. El impacto de CSS dentro del Shadow DOM de un elemento en particular es que los elementos HTML se pueden encapsular sin el riesgo de que los estilos CSS se filtren y afecten a elementos a los que no se supone que deban afectar. Aunque estos elementos están encapsulados con respecto a HTML y CSS, aún pueden disparar eventos que pueden ser recogidos por otros elementos en el documento. [5] [6]
El subárbol delimitado en un elemento se denomina árbol de sombra. El elemento al que está asociado el árbol de sombra se denomina host de sombra. [6]
Un Shadow DOM siempre debe estar conectado a un elemento existente, ya sea adjuntándolo como un elemento literal o mediante scripts . En JavaScript , los Shadow DOM se adjuntan a un elemento mediante Element.attachShadow(). [7]
Una plantilla HTML es una forma de insertar fragmentos de HTML que se clonan de la plantilla a voluntad. La sintaxis de las plantillas HTML es la siguiente:
< html > < plantilla > < h1 >< nombre de la ranura = "título" ></ ranura > < h1 > < p >< nombre de la ranura = "descripción" ></ ranura > < p > </ plantilla > </ html > Los scripts no se ejecutarán y los recursos que están dentro de una plantilla no se obtendrán hasta que se cree una instancia de la plantilla. [8]
Los componentes web son compatibles con las versiones actuales de los principales navegadores. [9]
La compatibilidad con navegadores más antiguos se implementa mediante polyfills basados en JavaScript .
Existen muchas bibliotecas que se basan en Web Components con el objetivo de aumentar el nivel de abstracción al crear elementos personalizados. Algunas de estas bibliotecas son X-Tag, Slim.js, Polymer , Bosonic, Riot.js, Salesforce Lightning Web Components, DataFormsJS, Telepathy y Wompo.
Existen numerosos esfuerzos comunitarios para el ecosistema de Web Components. WebComponents.org [10] proporciona una interfaz para buscar cualquier componente web existente, Custom Elements Everywhere [11] valida si los frameworks de interfaz de usuario populares son compatibles y están listos para usar el estándar de Web Components, con un conjunto de errores pendientes y soluciones alternativas disponibles. Además, Vaadin Tutorials [12] tiene una sección dedicada que muestra cómo se usan esas soluciones alternativas de manera eficiente con aplicaciones de demostración de ejemplo y temas similares relacionados, como Infinite Craft.
En 2011, Alex Russell presentó por primera vez los componentes web en la Conferencia Fronteers. [13]
En 2013, Google lanzó Polymer , una biblioteca basada en componentes web. [14] Polymer es una implementación canónica de Material Design para interfaces de usuario de aplicaciones web.
En 2016, se presentó RequireJS como biblioteca de JavaScript y complemento de carga AMD para elementos personalizados. [15]
En 2017, el equipo de Ionic (marco de aplicaciones móviles) creó StencilJS, un compilador de JavaScript que genera componentes web. [16]
En 2018, Angular 6 introdujo Angular Elements, que permite empaquetar los componentes Angular como elementos web personalizados, que forman parte del conjunto de componentes web de las API de la plataforma web. [17]
En 2018, Firefox 63 habilitó el soporte de componentes web de forma predeterminada y actualizó las herramientas para desarrolladores para admitirlos. [18]
En 2018, el equipo de Google Chrome desarrolló LitElement como parte de un proyecto más amplio, Polymer . LitElement fue diseñado para ser un marco liviano y fácil de usar para crear componentes web.