Hispanopedia WikiLos Web Components son un conjunto de características que proporcionan un modelo de componentes estándar para la web [ 1 ] que permite la encapsulación e interoperabilidad de elementos HTML individuales . Los Web Components son un enfoque popular al construir microfrontends .
Las principales tecnologías utilizadas para crear componentes web incluyen: [ 2 ]
- Elementos personalizados
- API para definir nuevos elementos HTML
- Shadow DOM
- DOM y estilos encapsulados, con composición
- plantillas HTML
- Fragmentos HTML que no se renderizan, sino que se almacenan hasta que se instancian mediante JavaScript [ 3 ].
Características
Elementos personalizados
Los elementos personalizados se dividen en dos partes: elementos personalizados autónomos y elementos integrados personalizados. Los elementos personalizados autónomos son elementos HTML completamente separados de los elementos HTML nativos ; se construyen esencialmente desde cero utilizando la API de elementos personalizados . Los elementos integrados personalizados son elementos que se basan en elementos HTML nativos para reutilizar su funcionalidad. [ 4 ]
Shadow DOM
El Shadow DOM es una funcionalidad que permite al navegador web renderizar elementos DOM sin incluirlos en el árbol DOM principal del documento. Esto crea una barrera entre lo que el desarrollador y el navegador pueden acceder; el desarrollador no puede acceder al Shadow DOM de la misma manera que lo haría con elementos anidados, mientras que el navegador puede renderizar y modificar ese código de la misma forma que lo haría con elementos anidados. El impacto del CSS con ámbito dentro del Shadow DOM de un elemento en particular es que los elementos HTML pueden encapsularse sin el riesgo de que los estilos CSS se filtren y afecten a elementos que no deberían verse afectados. Aunque estos elementos están encapsulados con respecto a HTML y CSS, aún pueden generar eventos que pueden ser detectados por otros elementos del documento. [ 5 ] [ 6 ]
El subárbol con ámbito en un elemento se llama árbol de sombra. El elemento al que está adjunto el árbol de sombra se llama 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 usando Element.attachShadow(). [ 7 ]
Plantilla HTML
Una plantilla HTML define un bloque de contenido HTML que no se renderiza cuando se carga la página, pero que puede instanciarse durante la ejecución. Un elemento de plantilla se estructura de la siguiente manera:
<template> <h1> Título </h1> <p> Descripción </p> </template>Los scripts dentro de una plantilla no se ejecutan, y los recursos no se obtienen, hasta que el contenido se clona o se agrega al DOM. [ 8 ]
Compatibilidad con navegadores
Los componentes web son compatibles con las versiones actuales de todos los navegadores principales. [ 9 ]
La compatibilidad con versiones anteriores de navegadores se implementa mediante polyfills basados en JavaScript .
Bibliotecas
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.
Comunidad
Existen numerosos esfuerzos comunitarios para el ecosistema de Web Components. WebComponents.org [ 10 ] proporciona una interfaz para buscar cualquier Web Components existente. Custom Elements Everywhere [ 11 ] valida si los frameworks front-end más populares son compatibles y están listos para usar el estándar 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 usar esas soluciones alternativas de manera eficiente con aplicaciones de demostración de ejemplo y temas relacionados.
Historia
En 2011, Alex Russell presentó por primera vez los Web Components en la conferencia Fronteers. [ 13 ]
En 2013, Google lanzó Polymer , una biblioteca basada en Web Components. [ 14 ] Polymer es una implementación canónica de Material Design para interfaces de usuario de aplicaciones web.
En 2016, se introdujo RequireJS como biblioteca de JavaScript y complemento de cargador AMD para elementos personalizados. [ 15 ]
En 2017, el equipo de Ionic (marco de desarrollo 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 de 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ó la compatibilidad con Web Components de forma predeterminada y actualizó las herramientas para desarrolladores para que los admitieran. [ 18 ]
En 2018, el equipo de Google Chrome desarrolló LitElement como parte del proyecto Polymer . LitElement fue diseñado para ser un framework ligero y fácil de usar para la creación de componentes web.
Véase también
Referencias
- ↑ GitHub - w3c/webcomponents: Especificaciones de componentes web. , World Wide Web Consortium, 3 de enero de 2019 , consultado el 3 de enero de 2019
- ↑ "Componentes web" . MDN Web Docs . Consultado el 3 de enero de 2019 .
- ↑ "<template>: El elemento Plantilla de contenido" . MDN Web Docs . Mozilla . Consultado el 8 de julio de 2018 .
- ↑ "Elementos personalizados" . www.w3.org . Consultado el 1 de diciembre de 2016 .
- ↑ "¿Qué demonios es Shadow DOM?" . Dimitri Glazkov . 15-01-2011 . Consultado el 01-12-2016 .
- 1 2 "Shadow DOM v1: Componentes web autónomos | Web | Google Developers" . Google Developers . Consultado el 1 de diciembre de 2016 .
- ↑ "Shadow DOM" . Mozilla Developer Network . Consultado el 1 de diciembre de 2016 .
- ↑ Comunidad. "Introducción a los elementos de plantilla — WebComponents.org" . webcomponents.org . Consultado el 3 de diciembre de 2016 .
- ↑ "webcomponents.org - Discuta y comparta componentes web" . www.webcomponents.org . Consultado el 22 de julio de 2020 .
- ↑ "Buscar componentes web disponibles" .
- ↑ "Validar frameworks de front-end con el estándar de componentes web" .
- ↑ "Tutoriales de componentes web" .
- ↑ "Componentes web y vistas basadas en modelos por Alex Russell · Fronteers" . fronteers.nl . Archivado del original el 17 de abril de 2022. Consultado el 2 de diciembre de 2016 .
- ↑ "El estado de los componentes web ★ Mozilla Hacks – el blog para desarrolladores web" . hacks.mozilla.org . Consultado el 2 de diciembre de 2016 .
- ↑ "RequireJS en Comercio" .
- ↑ "Soluciones de componentes web: una comparación" .
- ↑ "Cómo crear elementos personalizados y componentes web en Angular 6" .
- ↑ "Compatibilidad de las herramientas para desarrolladores con los componentes web en Firefox 63" .
Enlaces externos
- Sitio web oficial
- Estándares web
- Programación web
