WebComponents es el nombre por el que se conoce a un conjunto de características relacionadas con HTML, CSS y Javascript, mediante las cuales podremos crear nuestras propias etiquetas HTML, sin que sea necesario utilizar herramientas externas, librerías o frameworks. A estos elementos reutilizables se les suele llamar componentes.
En contexto de desarrollo web, cuando hablamos de un componente nos referimos a un elemento que une marcado (HTML), estilo (CSS) y funcionalidad (Javascript) con una determinada finalidad.
¿Por qué usar WebComponents?
Los WebComponents persiguen varios objetivos, entre los que se encuentran los siguientes:
🎈 Reutilización: A menudo, creamos elementos o partes que se repiten en nuestra web. Lo ideal es reutilizar ciertas partes de forma cómoda para no tener que repetirlas.
🛡️ Encapsulación: Los componentes debe estar aislados unos de otros. No queremos cambiar el contenido de uno por error mientras cambiabamos otro, queremos evitar colisiones de nombres de clases CSS que se llamen igual si no pertenecen al mismo componente, etc.
🧠 Interoperabilidad: Debe ser fácil intercambiar información entre componentes diferentes, utilizando tecnologías abiertas y estándares, que aseguren que van a funcionar en cualquier dispositivo, independientemente de su tecnología, ya sea abierta o de empresas particulares con sus respectivas decisiones de negocio.
😀 Mantenibles: A medida que escribimos código en una web, la cantidad de líneas de código se hace mayor y cada vez es más complicado. Necesitamos una forma de poder enfocarnos en una característica concreta, usando HTML, CSS y Javascript que sólo influya a dicha característica.
Por estas (y muchas otras razones) es muy interesante utilizar WebComponents.
Diferencias con los frameworks
Los WebComponents, aunque pueden ser similares, no están en la «misma categoría» que librerías o frameworks como React, Vue o Angular. Los WebComponents son una forma de construir componentes que está muy cerca de la plataforma web, del navegador, del lado del cliente.
Una buena forma de entenderlo es tener claro que un WebComponent es extender el lenguaje HTML para crear una etiqueta HTML propia. Un framework Javascript simula crear una etiqueta HTML (para facilitar su uso), pero realmente sólo existe en desarrollo, no es un componente real.
Muchas personas no tienen claras las diferencias entre conceptos como frameworks y librerías, o confunden webcomponents con frameworks de Javascript. Aunque las diferencias en algunos casos pueden ser sutiles, o no ser demasiado importantes, hay que tener en cuenta que muchas de estas tecnologías o herramientas no se situan en el mismo plano, y actúan en lugares diferentes.
La siguiente pirámide muestra visualmente en que punto está cada una de estas herramientas, muchas de ellas muy populares en algunos círculos:
Empecemos desde abajo:
Tecnologías base: Son las tecnologías nativas del navegador, que funcionan directamente sin ningún añadido. Los WebComponents están en esta categoría, junto a HTML, CSS y Javascript, puesto que puedes crearlos sin necesidad de incluir nada más.
Librerías: Las librerías son pequeñas piezas de código que se centran en cosas muy particulares. Ejemplos de librerías son htmx, Lit, Preact o React, aunque este último la mayoría de las veces se utiliza con herramientas que lo convierten en un framework.
Frameworks: Los frameworks están por encima de las librerías, ya que no son más que estas, ampliadas con utilidades, herramientas y un conjunto de reglas y/o convenciones para utilizarse. Ejemplos de frameworks serían Vue, Angular o Svelte.
Metaframeworks: Se llama así a ciertos frameworks que están más orientados en guiar al desarrollador para tareas comunes que están por encima y no cubren los frameworks del apartado anterior. Cosas como SSG (Static Site Generation), SSR (Server Site Rendering), o caracerísticas enfocadas en SEO suelen ser algunas de las cosas que los caracterizan. Astro, Eleventy, NextJS o React Router se podrían considerar metaframeworks.
Cuando hablamos de WebComponents, nos referimos a la tecnología base, sin embargo, existen librerías como Lit que se enfocan en crear WebComponents de una forma más ágil, frameworks como Svelte que permiten convertir código a WebComponents, u otros frameworks (la mayoría) que permiten incorporarlos en su código y trabajar con ellos.
Soporte y compatibilidad
Aunque los WebComponents tuvieron una accidentada historia de arranque, actualmente son compatibles en todos los navegadores actuales de forma nativa. No obstante, WebComponents es realmente un conjunto de características que pueden funcionar independientemente, con o sin WebComponents, por lo que veremos que va un poco más allá.
