Web Components
Native web standards for creating reusable, encapsulated components that work in any framework or without one.
seed#web-components#custom-elements#shadow-dom#html#standards
What it is
Web Components are a set of web standards enabling creation of custom, reusable HTML elements with style and behavior encapsulation. They work in any framework — or without one.
Standards
- Custom Elements: define new HTML elements
- Shadow DOM: style and markup encapsulation
- HTML Templates: reusable declarative templates
When to use
- Components shared across different frameworks
- Micro frontends with mixed technologies
- Framework-agnostic design systems
- Embeddable widgets on third-party sites
Frameworks based on Web Components
| Framework | Author | Size | Focus |
|---|---|---|---|
| Lit | ~5 KB | Reactive, declarative, minimal boilerplate | |
| Stencil | Ionic | ~12 KB | Compiler that generates standard Web Components |
| FAST | Microsoft | ~8 KB | Adaptable design system, Fluent UI |
Why it matters
Web Components are browser standards that allow creating reusable HTML elements without framework dependencies. They are the choice when you need components that work in any context — React, Vue, Angular, or vanilla HTML.
References
- Web Components - MDN — MDN documentation.
- Lit — Google, 2024. Lightweight library for creating Web Components.
- Using Shadow DOM — MDN — MDN, 2024. Shadow DOM guide for encapsulation.