Web Components

¿Qué es?

Web Components son un conjunto de estándares web que permiten crear elementos HTML custom reutilizables con encapsulación de estilos y comportamiento. Funcionan en cualquier framework — o sin framework.

Estándares

Los Web Components se basan en tres especificaciones del W3C/WHATWG que trabajan juntas:

• Custom Elements: API para registrar nuevos elementos HTML con ciclo de vida propio (connectedCallback, disconnectedCallback, attributeChangedCallback)
• Shadow DOM: árbol DOM encapsulado que aísla estilos y markup del documento principal
• HTML Templates: elementos <template> y <slot> para contenido declarativo reutilizable

Custom Element nativo

class UserCard extends HTMLElement {
  static observedAttributes = ["name", "role"];
 
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }
 
  connectedCallback() {
    this.render();
  }
 
  attributeChangedCallback() {
    this.render();
  }
 
  render() {
    const name = this.getAttribute("name") ?? "Unknown";
    const role = this.getAttribute("role") ?? "";
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 1rem;
          border: 1px solid #333;
          border-radius: 8px;
          font-family: system-ui;
        }
        :host([highlighted]) { border-color: #58a6ff; }
        .name { font-weight: 600; }
        .role { color: #888; font-size: 0.875rem; }
      </style>
      <span class="name">${name}</span>
      <span class="role">${role}</span>
    `;
  }
}
 
customElements.define("user-card", UserCard);

Uso en HTML:

<user-card name="Ana García" role="Staff Engineer" highlighted></user-card>

El selector :host aplica estilos al propio elemento. :host([highlighted]) responde a atributos. Los estilos dentro del Shadow DOM no afectan al resto de la página ni viceversa.

Ejemplo con Lit

Lit simplifica la autoría eliminando el boilerplate del API nativa:

import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js";
 
class UserCard extends LitElement {
  static styles = css`
    :host { display: block; padding: 1rem; border: 1px solid #333; border-radius: 8px; }
    .name { font-weight: 600; }
    .role { color: #888; font-size: 0.875rem; }
  `;
 
  @property() name = "";
  @property() role = "";
 
  render() {
    return html`
      <span class="name">${this.name}</span>
      <span class="role">${this.role}</span>
    `;
  }
}
 
customElements.define("user-card", UserCard);

Lit añade reactividad declarativa, templates con tagged template literals y un sistema de propiedades tipado — todo en aproximadamente 5 KB.

Interoperabilidad con frameworks

La clave es que los Web Components usan atributos HTML (strings) y propiedades JavaScript (cualquier tipo). Los frameworks que distinguen entre ambos — como Vue y Svelte — tienen mejor interoperabilidad que los que tratan todo como atributos.

Cuándo usar

• Componentes compartidos entre frameworks diferentes
• Micro frontends con tecnologías mixtas
• Design systems framework-agnostic
• Widgets embebibles en sitios de terceros

Frameworks basados en Web Components

Limitaciones

• Shadow DOM y CSS externo: los estilos globales (Tailwind, CSS frameworks) no penetran el Shadow DOM — hay que usar CSS custom properties o ::part() para exponer puntos de estilización
• SSR limitado: Declarative Shadow DOM existe pero el soporte en frameworks de SSR es incompleto; la hidratación requiere cuidado
• Accesibilidad: el Shadow DOM puede romper la navegación con lectores de pantalla si no se gestionan correctamente los roles ARIA y el orden de foco
• API verbosa: sin Lit u otro framework, el boilerplate para reactividad y templates es considerable

¿Por qué importa?

Los Web Components resuelven un problema que los frameworks no pueden: componentes que funcionan en cualquier contexto sin dependencias de runtime. Para design systems que deben servir a equipos con React, Vue y Angular simultáneamente, son la única opción que no fuerza una migración. El tradeoff es claro — más boilerplate y menos ergonomía que un framework, pero cero acoplamiento y compatibilidad garantizada por el navegador.

Referencias

• Web Components — MDN — MDN, 2024. Documentación de referencia completa de los estándares.
• Custom Elements Specification — WHATWG, 2024. Especificación oficial de Custom Elements en el HTML Living Standard.
• Custom Elements v1 — web.dev — Google, 2024. Guía práctica de Custom Elements con ejemplos.
• Lit — Google, 2024. Biblioteca ligera para crear Web Components con reactividad declarativa.
• Using Shadow DOM — MDN — MDN, 2024. Guía de Shadow DOM para encapsulación de estilos y markup.