Componentes web: mitos y verdad sobre Elementos personalizados

Componentes Web: Desmontando Mitos y Explorando sus Verdaderas Capacidades

Los componentes web a menudo son criticados por supuestamente solo permitir el paso de propiedades como cadenas mediante atributos. Este malentendido surge de una interpretación errónea del mecanismo attributeChangedCallback. Los atributos HTML son una parte estática del marcado, no están directamente vinculados al entorno de ejecución de JavaScript. Para pasar objetos, arrays o primitivos, utiliza getters/setters en la clase del componente. Los navegadores permiten establecer propiedades de cualquier tipo directamente a través de la API del DOM o proxies.

class MyElement extends HTMLElement {
  set data(value) {
    this._data = value;
    this.render();
  }
}

El Shadow DOM proporciona aislamiento de estilos y DOM, protegiendo contra conflictos externos. Criticar el aislamiento como un defecto ignora la elección: los Custom Elements funcionan sin Shadow DOM. Para personalización, utiliza variables CSS y ::part():

my-component::part(button) {
  background: var(--accent-color);
}

El mito de la duplicación de estilos: las Adopted Style Sheets permiten aplicar estilos compartidos a todas las instancias del Shadow DOM.

El ciclo de vida comienza en el constructor, no cuando se conecta al DOM. Los componentes se crean en memoria y se manipulan mediante DocumentFragment para virtualización sin renderizado.

Media Verdad: Registro y Hooks del Ciclo de Vida

El registro global de Custom Elements requiere nombres únicos. La solución son prefijos (por ejemplo, app-button) y try/catch durante el registro:

try {
  customElements.define('app-button', ButtonElement);
} catch (e) {
  console.warn('Conflicto de nombre:', e);
}

Las colisiones se detectan mediante pruebas. Los espacios de nombres planos son un patrón estándar en JavaScript, DNS y HTML.

Los hooks connectedCallback/disconnectedCallback se activan al moverse en el DOM. La solución es una bandera de inicialización:

connectedCallback() {
  if (this._initialized) return;
  this._initialized = true;
  this.init();
}

La desregistración es imposible, pero esto es una ventaja: los navegadores almacenan en caché el constructor sin sobrecarga.

Matices Reales y Soluciones

El análisis de HTML activa connectedCallback en la etiqueta de apertura antes de procesar el contenido. Las APIs del DOM no están disponibles. Usa defer o type="module" para inicialización diferida. Una alternativa es customElements.whenDefined():

const button = document.querySelector('app-button');
await customElements.whenDefined('app-button');
button.method();

Para garantizar el acceso a elementos hijos, utiliza renderCallback o hooks similares.

Fortalezas de los Componentes Web

Los componentes web vinculan nativamente el marcado HTML con JavaScript. Las etiquetas personalizadas sirven como marcadores para integración en el servidor o cliente sin dependencia de proveedores.

Gestión atómica del ciclo de vida: los navegadores notifican sobre conexión/desconexión independientemente de los frameworks.

Un modelo fundamental para Lit, Symbiote.js y micro-frontends. Funciona con React, Vue, Angular, SPAs y SSR.

• Aislamiento sin sobrecarga: el Shadow DOM es opcional.
• Reactividad nativa: propiedades + proxies.
• Versatilidad: desde widgets hasta dashboards con WebSocket y gráficos.
• Virtualización: DocumentFragment para listas de 100k+ elementos.
• Estilos: variables CSS, ::part(), Adopted Style Sheets.

Conclusiones Clave

• Las propiedades de cualquier tipo se pasan mediante getters/setters; los atributos son solo para cadenas.
• El Shadow DOM aísla pero puede desactivarse si es necesario; estilos mediante variables y ::part.
• El registro global se resuelve con prefijos y pruebas; las colisiones son raras.
• Los hooks connected/disconnected con una bandera evitan la inicialización duplicada.
• La asincronía del análisis se corrige con defer/module o whenDefined.

— Editorial Team