Web Components
Estándares web nativos para crear componentes reutilizables y encapsulados que funcionan en cualquier framework o sin framework.
seed#web-components#custom-elements#shadow-dom#html#standards
¿Qué es?
Web Components son un conjunto de estándares web que permiten crear elementos HTML custom reutilizables con encapsulación de estilos y comportamiento. Funcionan en cualquier framework — o sin framework.
Estándares
- Custom Elements: definir nuevos elementos HTML
- Shadow DOM: encapsulación de estilos y markup
- HTML Templates: templates declarativos reutilizables
Cuándo usar
- Componentes compartidos entre frameworks diferentes
- Micro frontends con tecnologías mixtas
- Design systems framework-agnostic
- Widgets embebibles en sitios de terceros
Frameworks basados en Web Components
| Framework | Autor | Tamaño | Enfoque |
|---|---|---|---|
| Lit | ~5 KB | Reactivo, declarativo, mínimo boilerplate | |
| Stencil | Ionic | ~12 KB | Compilador que genera Web Components estándar |
| FAST | Microsoft | ~8 KB | Design system adaptable, Fluent UI |
Limitaciones
- Shadow DOM dificulta el styling externo y la integración con frameworks CSS como Tailwind
- El server-side rendering (SSR) de Web Components es limitado comparado con frameworks como React o Vue
- La API nativa es verbosa — por eso existen frameworks como Lit que simplifican la autoría
¿Por qué importa?
Los Web Components son estándares del navegador que permiten crear elementos HTML reutilizables sin dependencia de frameworks. Son la opción cuando necesitas componentes que funcionen en cualquier contexto — React, Vue, Angular o vanilla HTML.
Referencias
- Web Components - MDN — MDN, 2024. Documentación de referencia.
- Lit — Google, 2024. Biblioteca ligera para crear Web Components.
- Using Shadow DOM — MDN — MDN, 2024. Guía de Shadow DOM para encapsulación.