The State of Web Components in 2025

Web Components are no longer the controversial spec they were a decade ago. With Shadow DOM, custom elements, and HTML templates settled across browsers, the story in 2025 is interoperability.

What changed recently

1. Declarative Shadow DOM ships in all evergreen browsers, enabling SSR.
2. Form-associated custom elements let <my-input> work inside <form> natively.
3. CSS @scope complements Shadow DOM for style isolation without it.
4. Frameworks (Lit, Stencil, Solid, Svelte) all compile to standard custom elements.

When to reach for them

• Design systems that must be consumed by multiple frameworks.
• Embeds & widgets dropped into unknown host pages.
• Long-lived UI that should outlive framework churn.

When not to

• Highly interactive single-page apps with shared state — a framework still wins.
• Teams unfamiliar with Shadow DOM styling quirks (CSS doesn’t pierce the boundary).

The minimum example

class HelloChip extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: "open" }).innerHTML = `
      <style>:host { padding: .5rem 1rem; border-radius: 999px; background: #eee; }</style>
      <slot>Hello</slot>
    `;
  }
}
customElements.define("hello-chip", HelloChip);

TL;DR

Web Components are the lingua franca of the browser. If a UI element will be embedded in environments you don’t control, ship it as a custom element.