Desarrollo de Web Components personalizados

El problema de la sobrecarga de los frameworks

Durante años, el desarrollo frontend ha estado dominado por frameworks monolíticos como React, Angular o Vue. Resuelven problemas complejos, sí, pero también imponen un costo inicial alto: bundle sizes enormes, curvas de aprendizaje pronunciadas y una dependencia constante de sus ecosistemas. Para muchos proyectos, sobre todo los que necesitan componentes reutilizables ligeros o integración en páginas ya existentes, esa sobrecarga es innecesaria y hasta contraproducente.

La solución: Web Components estándar

Los Web Components son un conjunto de tecnologías nativas del navegador (Custom Elements, Shadow DOM y HTML Templates) que permiten crear elementos encapsulados y reutilizables sin depender de librerías externas. Al extender la clase HTMLElement, podemos definir nuestro propio comportamiento, ciclo de vida y estilo, todo con JavaScript vanilla y el DOM nativo.

Beneficios frente a los frameworks pesados

  1. Ligereza y rendimiento: Un Web Component pesa cero kilobytes en dependencias; su código es el que escribes, sin runtime adicional. La carga y la ejecución son mucho más rápidas, lo que mejora el rendimiento percibido y el First Contentful Paint.
  2. Interoperabilidad universal: Funcionan en cualquier framework e incluso en páginas sin framework. Puedes usar tu componente en React, Angular, Vue o con HTML plano. Esa portabilidad elimina el vendor lock-in.
  3. Encapsulamiento real: El Shadow DOM aísla estilos y estructura, evita conflictos globales de CSS y permite un diseño verdaderamente modular, sin temor a efectos colaterales.
  4. Ciclo de vida nativo: Métodos como connectedCallback, disconnectedCallback, attributeChangedCallback y adoptedCallback ofrecen un control fino sobre el ciclo de vida del elemento, similar a los hooks de los frameworks pero sin abstracciones intermedias.
  5. Mantenibilidad a largo plazo: Al ser estándares del W3C, los Web Components tienen soporte futuro garantizado. No dependes de la popularidad ni de la hoja de ruta de un framework particular; inviertes en conocimiento que permanece.

Implementación práctica

Crear un componente personalizado es tan sencillo como esto:

class MiBoton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<button><slot>Click</slot></button>`;
  }

  connectedCallback() {
    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('mi-click'));
    });
  }
}

customElements.define('mi-boton', MiBoton);

Luego se usa como <mi-boton>Enviar</mi-boton> en cualquier HTML. Sin imports de terceros, sin transpilación, sin configuración.

¿Cuándo elegir Web Components?

  • Cuando necesites un componente autónomo que se incruste en múltiples proyectos o sitios.
  • Cuando el rendimiento y el tamaño del bundle sean críticos (por ejemplo, en dispositivos móviles o conexiones lentas).
  • Cuando quieras reducir la complejidad y la deuda técnica evitando la obsolescencia de los frameworks.

Lección aprendida

Los frameworks no son malos, pero a menudo se usan como martillo para todo tipo de clavos. Los Web Components devuelven el control al estándar web, recordándonos que la plataforma ya ofrece herramientas poderosas. Nuestro trabajo como ingenieros es elegir la herramienta adecuada para cada problema; muchas veces, la solución más simple, nativa y ligera es la mejor inversión a largo plazo.

© Arturo Juárez Monroy