# Web Components: qué son y cuándo convienen > Los Web Components son APIs del navegador para crear elementos reutilizables con comportamiento encapsulado. Esta guía explica cómo se relacionan custom elements, Shadow DOM, templates y slots y qué revisar antes de convertir una parte de una interfaz en un componente. - URL canónica: https://visteesto.com/nota/web-components-que-son-cuando-convienen - Autor: [Martin Rodriguez](https://visteesto.com/autor/martin-rodriguez) - Publicado: 2026-10-04T21:00:00.000Z - Actualizado: 2026-10-05T12:00:40.158Z - Sección: Tecnología - Tema: web-components-programacion - Idioma: es - Consulta principal: qué son los Web Components y cuándo convienen ## Resumen verificable - Web Components reúne custom elements, Shadow DOM, templates y slots para crear piezas reutilizables. ([evidencia](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)) - Los custom elements se definen y registran con CustomElementRegistry.define y tienen callbacks de ciclo de vida. ([evidencia](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)) - Shadow DOM encapsula un árbol interno y reduce colisiones de estilos y selectores con la página. ([evidencia](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM)) - Templates y slots permiten reutilizar una estructura y componer contenido aportado por la página. ([evidencia](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)) ## Aporte editorial de VisteEsto VisteEsto convierte la documentación de Web Components en una checklist de decisión: reutilización, ciclo de vida, accesibilidad, límites de estilo, slots y costo de mantenimiento antes de encapsular. ## Qué son los Web Components 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. Un componente puede aparecer en el HTML como una etiqueta propia, por ejemplo . 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. ## Custom elements y ciclo de vida 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, templates y slots 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. ## Checklist para decidir si conviene un Web Component 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. ## Fuentes consultadas - Fuente primaria: [MDN: Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) - Fuente primaria: [MDN: Using custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) - Fuente primaria: [MDN: Using shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) ## Imágenes y licencias - Custom element que contiene un Shadow DOM encapsulado. Autor: VisteEsto. Licencia: [VisteEsto editorial](https://visteesto.com/terminos). [Origen](https://visteesto.com/nota/web-components-que-son-cuando-convienen). - Custom element conectado al ciclo de vida del documento. Autor: VisteEsto. Licencia: [VisteEsto editorial](https://visteesto.com/terminos). [Origen](https://visteesto.com/nota/web-components-que-son-cuando-convienen). - Template y slot que componen el interior de un Web Component. Autor: VisteEsto. Licencia: [VisteEsto editorial](https://visteesto.com/terminos). [Origen](https://visteesto.com/nota/web-components-que-son-cuando-convienen). ## Cómo citar Citar título, autor, fecha de publicación o actualización y la URL canónica. Las afirmaciones centrales incluyen su evidencia directa arriba. Esta versión Markdown es una representación accesible; la nota HTML canónica es la fuente editorial de referencia.