Frameworks come and go. jQuery dominated for a decade, then Angular, then React, now Svelte and Solid are growing. Each switch means rewriting component libraries. Web Components promise a way out – components that work in any framework because they’re based on browser standards.

The Three Pillars

Custom Elements allow defining custom HTML elements with their own lifecycle (connectedCallback, disconnectedCallback, attributeChangedCallback).

Shadow DOM fully encapsulates a component’s internal DOM and CSS. Styles inside Shadow DOM can’t leak out, and external styles can’t penetrate – unless the component exposes CSS Custom Properties or ::part() selectors as a styling API.

HTML Templates (<template> and <slot>) define reusable markup structures that are cloned and inserted into the DOM on demand. Slots enable content projection – browser-native.

Practical Viability 2025

Browser support is complete. Tools like Lit (Google), Stencil (Ionic), and Fast (Microsoft) simplify development significantly. Lit’s runtime is ~5 KB (gzip) – far lighter than any framework.

Prominent design systems using Web Components: Adobe Spectrum, IBM Carbon, SAP UI5, GOV.UK (experimental). The commonality: large organizations with heterogeneous tech stacks.

Web Components + Design Tokens

The styling API of a Web Component is based on CSS Custom Properties – exactly the format that token build pipelines produce as output. Token values flow into components via CSS Custom Properties without build tool integration or framework-specific adapters.

Limitations and Trade-offs

Criterion
Web Components
React/Svelte/Vue
Browser-native
Yes
No (runtime required)
Framework-agnostic
Yes
No
SSR
Complex (DSSR)
Established
Bundle size
~5 KB runtime (Lit)
30–120 KB runtime
CSS encapsulation
Shadow DOM (native)
CSS Modules / Scoped

Key Takeaways

  • Web Components are based on three W3C standards: Custom Elements, Shadow DOM, and HTML Templates.
  • Browser support is complete in 2025 – Lit, Stencil, and Fast simplify development.
  • Adobe, IBM, SAP, and GOV.UK use Web Components for design systems with heterogeneous tech stacks.
  • CSS Custom Properties as styling API connect Web Components seamlessly with token architectures.
  • SSR remains the biggest trade-off – Declarative Shadow DOM is improving the situation.