Blog Web components are finally worth another look
Web components are finally worth another look
TL;DR Web components are custom HTML elements built with browser APIs, so they work in any framework or none. They are a strong fit for design systems and widgets shared across projects and stacks. They are a weaker fit for whole apps, where a framework still does more for you.
Web components have been around long enough that a lot of developers filed them under "tried it, too rough." That verdict is out of date. The platform has caught up, the ergonomics have improved, and there is now a clear lane where they are genuinely the right tool.
What they actually are
Web components are a few browser features working together: custom elements let you define your own HTML tags, the shadow DOM encapsulates a component's markup and styles so they do not leak or get overridden, and templates let you stamp out structure. Put them together and you get a reusable element that carries its own behaviour and styling.
The defining trait is that they are built into the browser. No framework, no build step required. A web component is just an element the browser understands.
Where they shine
The killer use case is anything shared across projects and stacks.
- Design systems. A button or a card built as a web component works in React, in another framework, and in a plain HTML page. One implementation, used everywhere.
- Embeddable widgets. A component you ship for others to drop into their sites, whatever they are built with.
- Long-lived UI. Because it depends on the platform, not a framework version, it does not rot when the framework moves on.
That portability is something a framework-specific component simply cannot offer.
Where they do not shine
Web components are not trying to replace frameworks for building whole applications. Frameworks still give you routing, state management, and rendering ergonomics that raw components do not. Building a full app out of nothing but web components means rebuilding a lot of what a framework hands you.
Use them for the reusable pieces, not the whole machine.
The honest take
If you last looked at web components years ago and walked away, they are worth a fresh look, specifically for the shared-element problem. When you need a component that must work across teams, frameworks, or plain HTML, reaching for the platform instead of a framework is the move that ages well. For everything inside a single app, keep using the framework you already have. Right tool, right job.
FAQ
What are web components?
They are a set of browser features, custom elements, shadow DOM, and templates, that let you define your own HTML tags with encapsulated markup, styles, and behaviour. Because they are built into the platform, they run anywhere without a framework.
Do web components replace frameworks?
Not for building full applications, where frameworks still provide routing, state, and rendering ergonomics that components alone do not. Web components shine for reusable elements shared across projects and stacks, which is a different job.
Why use web components over a framework component?
Portability. A framework component only works in that framework. A web component works in React, in another framework, or in plain HTML. For a design system used by teams on different stacks, that reach is the whole point.