Web components (custom elements)

Los web components son estándares del navegador, principalmente custom elements y Shadow DOM, para definir elementos HTML reutilizables que funcionan en cualquier framework o en HTML puro.

Los web components son un conjunto de estándares del navegador para construir elementos HTML reutilizables. Los principales son los custom elements, que permiten definir una etiqueta como <user-card> con su propio comportamiento, y el Shadow DOM, que le da al elemento un árbol DOM privado y estilos encapsulados. Cualquier framework puede renderizar un custom element, porque para el framework es una etiqueta HTML más.

Ejemplo

class UserCard extends HTMLElement {
  connectedCallback() {
    const name = this.getAttribute('name');
    this.textContent = 'Usuario: ' + name;
  }
}
customElements.define('user-card', UserCard);

Después de ejecutar este código, <user-card name="Ana"></user-card> funciona en un template de AngularJS, en un template de Angular o en HTML puro. Angular puede empaquetar así uno de sus componentes con createCustomElement de @angular/elements.

Los custom elements son útiles en dos situaciones: componentes de un sistema de diseño que deben funcionar en varios frameworks, y envolver una funcionalidad nueva para que una página legacy pueda alojarla.

Confusión frecuente

Un custom element oculta su framework a la página que lo usa. El framework igual se descarga. Si cinco elementos incluyen cada uno su propia copia de un framework, la página carga cinco copias.

Los web components definen una interfaz a nivel del DOM. No ofrecen enrutamiento, dependencias compartidas ni despliegue independiente, y por eso en una plataforma de microfrontends se combinan con una herramienta de federación o con import maps. Hay dos detalles que suelen sorprender: los atributos solo llevan strings, así que los datos complejos entran por propiedades, y el Shadow DOM es opcional. En microfrontends se ve cómo encajan las piezas.

Términos relacionados

• Microfrontend
• Sistema de diseño (design system)
• single-spa