Los componentes web son patrones nativos del navegador para crear componentes reutilizables. Funcionan en cualquier marco o sin marco. Esta guía presenta las tecnologías y cómo utilizarlas.
¿Qué son los componentes web?
Definición
Conjunto de estándares para componentes encapsulados.
Tecnologías
Elementos personalizados, Shadow DOM, plantillas HTML.
Nativo
Soportado directamente por navegadores.
Agnóstico del marco
Funciona con React, Vue, Angular o puro.
Por qué los componentes web
Reutilizar
Un componente, cualquier proyecto.
Encapsulación
Los estilos no se filtran.
Patrones
No depende de la biblioteca.
Longevidad
Los navegadores lo admiten, no lo desaprueban.
Elementos personalizados
¿Qué es?
Define nuevos elementos HTML.
Sintaxis
clase MyElement extiende HTMLElement { } customElements.define('mi-elemento', MiElemento);
###Ciclo de vida
ConnectedCallback, desconectadoCallback, atributoChangedCallback.
Uso
Sombra DOM
¿Qué es?
DOM encapsulado dentro del elemento.
Encapsulación
CSS no se filtra ni entra desde el exterior.
Creación
this.attachShadow({ modo: 'abrir' });
Ranuras
Plantillas HTML
¿Qué es?
Fragmentos HTML que no se procesan hasta que se clonan.
Sintaxis
Uso
Clonar y agregar a DOM.
Rendimiento
No rinde hasta que sea necesario.
Devoluciones de llamada del ciclo de vida
conectadoDevolución de llamada
Cuando se agrega al DOM.
desconectadoDevolución de llamada
Cuando se elimina del DOM.
atributoChangedCallback
Cuando el atributo cambia.
adoptadoDevolución de llamada
Cuando se mueve a un nuevo documento.
Atributos y propiedades
Atributos
Cadenas en HTML.
Propiedades
Valores de JavaScript en el objeto.
Sincronización
Reflexionar entre ambos.
atributos observados
static get observeAttributes() { return ['valor']; }
Ranuras
Ranura predeterminada
Ranuras con nombre
Uso
Repliegue
El contenido dentro de la ranura es de reserva.
Estilo
Estilos DOM de sombra
Estilos dentro de la raíz de la sombra.
###: anfitrión
Da estilo al elemento anfitrión.
:: ranurado
Estilos de contenido ranurado.
Partes CSS
::part() para personalización externa.
Variables CSS
Pasan por el límite de la sombra.
Con marcos
###Reaccionar
Se puede utilizar con envoltorio.
vista
Soporte nativo para elementos personalizados.
angulares
CUSTOM_ELEMENTS_SCHEMA.
###encendido
Biblioteca para facilitar la creación.
Elemento iluminado
¿Qué es?
Biblioteca de Google para Componentes Web.
Beneficios
Menos repetitivo, propiedades reactivas.
Plantillas
Literales de plantilla etiquetados.
Adopción
Popular para Componentes Web.
Plantilla
¿Qué es?
Compilador para Componentes Web.
JSX
Sintaxis familiar para desarrolladores de React.
Mecanografiado
Soporte nativo.
Carga diferida
Optimización automática.
Soporte del navegador
Moderno
Todos los navegadores modernos lo admiten.
Polirellenos
Para navegadores antiguos.
Verificación
https://caniuse.com/custom-elementsv1
Pruebas
Pruebas unitarias
Broma, Mocha con DOM.
Ejecutor de pruebas web
Pruebas modernas para componentes web.
WC abierto
Herramientas de prueba.
##Rendimiento
Costo inicial
Sombra DOM por encima.
Escalado
Muchos componentes son eficientes.
Paquete
Los componentes se cargan según demanda.
Errores comunes
Olvídate de Super
super() en el constructor.
Atributo vs Propiedad
Confundir a los dos.
Constructor pesado
Mucho trabajo en el constructor.
Estilo con fugas
Sin utilizar Shadow DOM.
Casos de uso
Sistemas de diseño
Componentes compartidos.
Microfronteras
Integración de partes independientes.
Widgets de terceros
Insertar en cualquier sitio web.
Integración heredada
Modernizarse poco a poco.
Conclusión
Los componentes web son estándares poderosos para componentes verdaderamente reutilizables. Funcionan hoy en todos los navegadores modernos y complementan cualquier pila.
##Preguntas frecuentes
1) ¿Los componentes web reemplazan a React? No necesariamente. Pueden coexistir.
2) ¿Necesito Lit o Stencil? Ayudan, pero la vainilla pura funciona.
3) ¿Funciona el SEO con Shadow DOM? Google renderiza JavaScript. Suele funcionar.
4) ¿El rendimiento es bueno? Sí. Los navegadores se han optimizado.
5) ¿Cuándo utilizar Componentes Web? Componentes compartidos entre proyectos/marcos.
Lea también
- Componentes Web con Lit: Guía práctica para UI reutilizable
- Alpine.js: la solución definitiva para sitios web simples e interactivos en 2025
- Desarrollo web moderno en 2025: tendencias, herramientas y estrategias innovadoras
- Frontend, backend y full stack: la guía para quien decide, no para quien programa
- GraphQL para aplicaciones: Guía de implementación
- Buenas Prácticas de Internacionalización (i18n) en React y Next.js en 2025