Web Component
A native browser standard for building reusable, encapsulated custom HTML elements that work in any framework or no framework at all.
· Reviewed by senior engineers
Web Components are a set of native browser APIs — Custom Elements, Shadow DOM and HTML Templates — that let you define reusable HTML elements with their own behaviour and styling. A web component is just a tag, like <my-product-card>, that any framework or plain HTML page can drop in and use.
The big idea is interoperability. A design system built as web components ships once and works in React, Vue, Angular, Svelte, an email vendor's template editor and a static HTML page. For organisations with multiple front-end stacks — common in large enterprises or after acquisitions — that portability is genuinely valuable.
The rough edges show up in details. Shadow DOM isolates styles beautifully but makes global theming, focus management and form participation harder. SSR support is uneven. The component-author ergonomics still trail React or Svelte for most teams. Libraries like Lit, Stencil and FAST close much of the gap.
Devinsta recommends web components for cross-stack design systems and for embeddable widgets that need to drop into customers' sites without conflict. For a single-stack product app, framework-native components remain the more productive choice.