Web Components: qué son y cuándo convienen

Web Components es el nombre de un conjunto de APIs del navegador para crear elementos reutilizables. La idea no es una biblioteca única: combina custom elements para definir etiquetas, Shadow DOM para encapsular una parte del árbol y templates o slots para reutilizar estructura y contenido.

También puede servirte: Web Workers en JavaScript: qué son y cuándo convienen

Un componente puede aparecer en el HTML como una etiqueta propia, por ejemplo <precio-tarjeta>. Su clase define comportamiento y ciclo de vida, mientras la página decide dónde usarlo. El navegador mantiene las piezas como elementos del DOM, por lo que siguen participando en accesibilidad, eventos y herramientas de desarrollo.

La encapsulación ayuda a evitar que un selector global o una variable del resto de la página rompa el interior del componente. No es una frontera de seguridad: un componente mal diseñado puede exponer estados, escuchar eventos innecesarios o dificultar la inspección. La decisión depende de la complejidad y de la necesidad de reutilización.

Un custom element autónomo extiende HTMLElement y se registra con customElements.define. El nombre debe incluir un guion para distinguirlo de una etiqueta HTML estándar. Cuando el elemento se conecta al documento, connectedCallback permite iniciar listeners o construir su contenido; attributeChangedCallback puede reaccionar a atributos observados.

El constructor debe limitarse a preparar el objeto y llamar a super. Los atributos y el contexto completo pueden no estar listos en ese momento, por lo que inicializar todo al conectarse suele ser más predecible. Si el componente se desconecta y vuelve a conectarse, el ciclo puede repetirse y debe limpiar lo que ya no necesita.

Los elementos personalizados mejoran la claridad cuando encapsulan una responsabilidad concreta. Si sólo se trata de un fragmento estático, una plantilla del framework o HTML semántico puede ser más simple. Definir una etiqueta propia no aporta por sí solo un diseño reutilizable: hacen falta contratos de atributos, eventos, estados y accesibilidad.

Shadow DOM crea un árbol interno asociado a un elemento anfitrión. Sus estilos y selectores no se mezclan automáticamente con los de la página, lo que reduce colisiones de nombres. El modo open permite acceder a shadowRoot desde código; closed oculta esa referencia pública, pero no convierte el componente en una caja de seguridad.

La etiqueta template contiene markup que no se renderiza hasta que se clona. Un componente puede usarla para construir su estructura de manera repetible. slot deja que la página aporte contenido al interior y ofrece un punto de composición sin obligar al componente a conocer cada texto o elemento que recibirá.

La encapsulación tiene un costo: estilos globales, pruebas, temas, formularios y herramientas de accesibilidad deben cruzar límites explícitos. CSS custom properties, atributos, propiedades y eventos pueden formar el contrato. Documentarlo evita que cada consumidor dependa de detalles internos que después se vuelven difíciles de cambiar.

Definí si necesitás reutilizar la misma pieza en varias páginas o tecnologías y si el contrato cabe en atributos, propiedades y eventos claros. Si el fragmento depende por completo del estado de un framework, mantenerlo dentro de ese sistema puede reducir adaptadores y duplicación.

Comprobá accesibilidad, foco, nombres, estados y comportamiento con teclado antes de encapsular. Probá el componente conectado, desconectado y repetido en la misma página, y asegurate de que no registre listeners duplicados. Si usás slots, especificá qué contenido acepta y qué ocurre cuando falta.

Por último, medí el beneficio frente a la complejidad de estilos, testing y comunicación con el resto del DOM. Un Web Component conviene cuando el límite hace más predecible la reutilización; no conviene cuando sólo agrega una etiqueta nueva alrededor de una pieza que nunca volverá a usarse.