Los Web Components son un conjunto de especificaciones que implementan los navegadores y que van a permitir crear nuevas etiquetas HTML con la estructura, estilos y funcionalidad que nosotros necesitemos.
Estos componentes nos proporcionan ventajas como que:
- Vamos a poder reutilizarlos en distintos proyectos.
- Vamos a generar piezas de código fácilmente mantenibles.
- El código final de la aplicación será más legible.
- Evitaremos que haya colisiones entre estilos dentro de las páginas.
Custom Elements
La especificación de Custom Elements nos permite crear nuevas etiquetas HTML con la estructura y funcionalidad que queramos que tengan. Nos van a permitir reutilizar en distintas aplicaciones web, sin necesidad de realizar configuraciones complejas, como puede ocurrir con librerías o frameworks como React o Angular.
HTML Templates
Los HTML Templates nos permiten crear plantillas con la estructura que debe tener nuestro componente para poder clonarla y rellenarla con distintos datos por cada instancia del componente que vayamos a crear. Con ellas podemos separar nuestro código en distintas capas, dejándolo más mantenible.
Shadow DOM
El Shadow DOM nos permite crear un DOM independiente del DOM principal de la página en la que vayamos a poner nuestro componente. Gracias a esta especificación, vamos a poder tener aislados nuestros componentes del resto de elementos de la página, evitando problemas muy comunes del desarrollo web como los conflictos entre estilos.
HTML Imports → Módulos ES6
La especificación de HTML Imports nos permitía importar los archivos de HTML en los que se definían los componentes, pero esta especificación se ha deprecado por problemas de rendimiento. En su lugar, se ha propuesto usar los Módulos de ES6 para realizar dicha importación y poder utilizar nuestras nuevas etiquetas HTML (Web Components) en nuestras aplicaciones web.
Futuro de los Web Components
Aunque los Web Components tienen sus ventajas a la hora de desarrollar aplicaciones, hay librerías y frameworks que nos permiten crear componentes (no nativos) y que tienen más fama entre la comunidad de desarrolladores y que les están quitando protagonismo a los componentes nativos.
Quizás les están comiendo el terreno porque nos facilitan crear dichos componentes (con funcionalidades como el Two-Way Binding), ya que para desarrollar componentes nativos puede llegar a ser complejo si no se tienen unos buenos conocimientos de JavaScript.
La principal ventaja de usar los componentes web nativos sería que no necesitamos crear configuraciones complejas para hacer que funcionen, ya que los navegadores los van a soportar de forma nativa. Este es un punto muy fuerte a su favor, ya que con el tiempo irán apareciendo nuevas librerías y frameworks que destronarán a las que ahora ocupan el trono, mientras que los componentes nativos perdurarán con el tiempo.
Para finalizar: pincha en este enlace para encontrar muchos Web Components nativos desarrollados por otras personas/empresas.