What Is Web Components?
Web Components Standard
Web Components are a set of browser-native APIs (Custom Elements, Shadow DOM, HTML Templates) that let you create reusable, encapsulated UI components without a framework like React or Vue.
How Web Components Works
Web Components work everywhere — any framework, any page. You define a custom HTML tag like <user-card> with its own styles and behavior encapsulated in Shadow DOM. Libraries like Lit and Stencil make building web components easier than using the raw APIs.
Key Concepts
- Shadow DOM — An isolated DOM subtree with scoped styles that can't leak out or be affected by external CSS
- Custom Elements — The API for defining new HTML tags with custom behavior — class MyElement extends HTMLElement
Frequently Asked Questions
Should I use Web Components instead of React?
For most apps, no. React's ecosystem, tooling, and developer experience are superior. Web Components shine when you need framework-agnostic components — like a design system shared across React, Vue, and vanilla JS projects.