Originalmente publicado en mi blog, este artículo reflexiona sobre mentalidades que he observado entre desarrolladores, especialmente entre quienes trabajan con React. React se volvió tan ubicuo que muchos piensan dentro de su modelo sin saber salir de él, y en ocasiones dependen por completo de su ecosistema. Me recuerda a la era en la que jQuery reinaba: útil en su momento, pero con el tiempo los navegadores implementaron estándares que hicieron innecesario ese sobrepeso. Lo mismo sucederá con las arquitecturas de componentes cuando la estandarización del navegador avance.
React llegó en 2013 con la propuesta de reducir la complejidad de las interfaces mediante una arquitectura declarativa basada en componentes, algo revolucionario entonces y ahora norma entre librerías UI. Pero eso no convierte a React en la referencia absoluta para pensar componentes. Ver Web Components como otra librería que hay que aprender es perder de vista que son parte de JavaScript estándar y de la propia plataforma web.
Un ejemplo práctico que ilustra la simplicidad de Web Components frente a patrones habituales en React: yo trabajé con Swiper JS para mostrar propiedades inmobiliarias y necesitaba que un componente de paginación controlara el contenedor swiper desde hijos anidados varias capas. En React lo habitual es usar context o una solución de estado para evitar prop drilling. Con Web Components basta usar el método closest en el DOM para localizar el swiper-container más cercano dentro del componente, acceder a la instancia de swiper y controlar la paginación directamente. No hace falta maquinaria adicional.
Otro punto fuerte es el estilo. El shadow DOM proporciona scope por defecto, de modo que tus estilos están encapsulados sin tener que recurrir a utilidades externas como Tailwind o a librerías CSS-in-JS. Incluso puedes usar un custom element sin JavaScript, solo escribiendo la etiqueta HTML personalizada. Crear etiquetas como blog-header permite seleccionar y aplicar estilos con baja especificidad y admitiendo múltiples instancias, lo que evita problemas de cascada y especificidad que surgen con selectores globales.
De hecho he desarrollado una metodología de estilos llamada CEA pensada para sacar partido al enfoque de componentes personalizados y sus scopes naturales. Los Web Components invitan a describir el documento de forma semántica, por ejemplo usando estructuras como main header blog-header article, lo que mejora la DX porque el propio marcado comunica intención y reduce la necesidad de wrappers y utilidades superfluas.
Además, la arquitectura ligada a custom elements encaja muy bien con sistemas de gestión de contenido. En AEM basta escribir el HTML del elemento personalizado en la plantilla HTL sin enredos de integraciones complejas. En WordPress se puede incluir la etiqueta del elemento en bloques de Gutenberg o en plantillas PHP, facilitando la reutilización en diferentes entornos sin atar la solución a un framework particular.
Al no usar un virtual DOM, los Web Components suelen ser más ligeros y directos. Librerías como Lit simplifican su creación y actualizan solo lo que cambia en el DOM real, evitando muchas de las preocupaciones sobre re-renderizados y contexto que aparecen en entornos como React. Y no es necesario abandonar React por completo: las versiones recientes como React 19 y Next 15 ofrecen soporte para custom elements, lo que permite combinar lo mejor de ambos mundos.
La mayoría de críticas hacia Web Components provienen de modelos mentales equivocados: pensar que son simplemente otro tipo de componente propio de un framework. Que no sean la solución perfecta para cada caso no significa que sean problemáticos; al contrario, son estándar y se integran con herramientas de gestión de estado, animación y otras librerías que ya usamos en JavaScript.
En Q2BSTUDIO pensamos que es hora de volver a los estándares web y de apostar por soluciones robustas y reutilizables. Como empresa de desarrollo de software y aplicaciones a medida ofrecemos experiencia en software a medida, inteligencia artificial, ciberseguridad y servicios cloud AWS y Azure. Si necesitas crear aplicaciones que funcionen en múltiples plataformas y sean fáciles de integrar con CMS o diferentes stacks tecnológicos, podemos ayudarte con soluciones adaptadas como servicios de desarrollo de aplicaciones a medida y estrategias de despliegue en la nube.
Ofrecemos además servicios de inteligencia de negocio y Power BI para transformar datos en decisiones, así como proyectos de IA para empresas que incluyan agentes IA y automatización inteligente. Si buscas protección y auditorías avanzadas, nuestro equipo de ciberseguridad y pentesting asegura tus activos digitales. Descubre cómo podemos crear tu solución con enfoque en calidad y escalabilidad visitando nuestra página de desarrollo de aplicaciones a medida en desarrollo de aplicaciones y software a medida y conoce nuestras capacidades en inteligencia artificial en servicios de inteligencia artificial para empresas.
En resumen, los Web Components son una vuelta a los fundamentos del navegador, una forma estándar y potente de crear componentes semánticos, reutilizables y fáciles de integrar. Úsalos cuando necesites comportamiento encapsulado y portabilidad entre tecnologías, combínalos con herramientas modernas cuando la aplicación lo requiera y considera a Q2BSTUDIO como tu socio para llevar esos proyectos a producción con garantías en inteligencia artificial, ciberseguridad, servicios cloud y business intelligence.
