Web Components in 2025 — Framework-Agnostic UI Development

Web Components have been a part of the web standards conversation for over a decade, but 2025 marks the year they have genuinely arrived as a mainstream development approach. With full browser support, mature tooling, and a growing ecosystem, Web Components offer something no JavaScript framework can: true platform-native component encapsulation that works everywhere.

At StrikingWeb, we have been building with Web Components for enterprise clients who need UI components that work across multiple frameworks and applications. This article explores the state of Web Components in 2025 and how to use them effectively.

The Core Web Component APIs

Web Components are built on four browser-native APIs that work together to enable custom, encapsulated, reusable HTML elements:

Custom Elements

Custom Elements allow you to define new HTML tags with custom behavior. The API is straightforward — you extend HTMLElement and register your element with the browser:

class StrikingButton extends HTMLElement {
  static observedAttributes = ['variant', 'size', 'disabled'];

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) this.render();
  }

  render() {
    const variant = this.getAttribute('variant') || 'primary';
    const size = this.getAttribute('size') || 'medium';
    this.shadowRoot.innerHTML = `
      <style>/* scoped styles */</style>
      <button class="${variant} ${size}">
        <slot></slot>
      </button>`;
  }
}

customElements.define('striking-button', StrikingButton);

Shadow DOM

Shadow DOM provides true style and DOM encapsulation. Styles defined inside a shadow root do not leak out, and external styles do not bleed in (with intentional exceptions via CSS custom properties and parts). This is a fundamentally different level of encapsulation than CSS Modules or scoped styles in frameworks — it is enforced by the browser itself.

In 2025, the Declarative Shadow DOM specification has reached full browser support, enabling server-side rendering of Web Components without JavaScript hydration hacks:

<striking-card>
  <template shadowrootmode="open">
    <style>:host { display: block; border-radius: 8px; }</style>
    <slot name="header"></slot>
    <slot></slot>
  </template>
  <h2 slot="header">Card Title</h2>
  <p>Card content here.</p>
</striking-card>

HTML Templates and Slots

The <template> element holds inert HTML that can be cloned and inserted into components. Slots provide a composition mechanism similar to React's children or Vue's slots, allowing consumers to project content into specific locations within a component's shadow DOM.

CSS Custom Properties for Theming

While Shadow DOM prevents external style leakage, CSS custom properties (CSS variables) pierce the shadow boundary intentionally. This makes them the ideal mechanism for theming Web Components:

/* Consumer styles */
striking-button {
  --btn-bg: #6366f1;
  --btn-color: white;
  --btn-radius: 8px;
  --btn-padding: 12px 24px;
}

/* Inside the component's shadow DOM */
button {
  background: var(--btn-bg, #3b82f6);
  color: var(--btn-color, white);
  border-radius: var(--btn-radius, 4px);
  padding: var(--btn-padding, 8px 16px);
}

Lit — The Leading Web Components Library

While you can build Web Components with vanilla JavaScript, Lit (formerly LitElement) has established itself as the standard library for Web Components development. Built by Google's Polymer team, Lit adds reactive properties, efficient template rendering, and a declarative programming model while adding minimal overhead — the core library is around 5KB gzipped.

Lit components feel familiar to anyone who has worked with React or Vue:

import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('striking-alert')
export class StrikingAlert extends LitElement {
  static styles = css`
    :host { display: block; padding: 16px; border-radius: 8px; }
    :host([type="warning"]) { background: #fef3c7; border: 1px solid #f59e0b; }
    :host([type="error"]) { background: #fee2e2; border: 1px solid #ef4444; }
  `;

  @property() type = 'info';
  @property() message = '';

  render() {
    return html`
      <div role="alert">
        <strong>${this.type.toUpperCase()}</strong>
        <p>${this.message}</p>
        <slot></slot>
      </div>`;
  }
}

When Web Components Make Sense

Web Components are not a replacement for React, Vue, or Angular. They solve a different problem. Here are the scenarios where Web Components deliver the most value:

Design Systems That Span Multiple Frameworks

This is the most compelling use case for Web Components. If your organization has applications built in React, Angular, Vue, and possibly legacy jQuery or server-rendered HTML, a Web Component-based design system ensures visual and behavioral consistency everywhere without maintaining framework-specific versions.

Micro-Frontend Architectures

Web Components are natural building blocks for micro-frontend architectures. Each team can build their micro-frontend using whatever framework they prefer, exposing the integration boundary as a custom element. The shell application assembles these custom elements without needing to know or care about the implementation details.

Embeddable Widgets

If you build widgets that customers embed in their own websites — chat widgets, booking forms, payment components — Web Components provide perfect encapsulation. Your widget's styles will not conflict with the host page, and the host page's styles will not break your widget.

"Web Components solve the interoperability problem that no JavaScript framework can address on its own. They are the universal interface layer for the web."

Practical Patterns and Best Practices

Accessibility First

Web Components require careful attention to accessibility. The shadow DOM creates challenges for screen readers and keyboard navigation if not handled properly. Always use ARIA attributes, manage focus within shadow roots, and ensure slotted content maintains proper semantics.

Form Participation

The ElementInternals API, now fully supported in all browsers, enables Web Components to participate in native HTML forms. This was previously one of the biggest limitations of custom elements:

class StrikingInput extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this.internals = this.attachInternals();
    this.attachShadow({ mode: 'open' });
  }

  // Component now works with form submission, validation, etc.
}

Testing Web Components

Testing Web Components follows familiar patterns. Use Web Test Runner or Playwright for integration tests, and standard unit testing tools for logic. The Open Web Components project provides excellent testing utilities specifically designed for custom elements.

The Ecosystem in 2025

The Web Components ecosystem has grown significantly. Notable projects include Shoelace (now Web Awesome), a comprehensive component library built on Lit; Spectrum Web Components from Adobe; and numerous open-source design systems. The integration story with major frameworks has improved dramatically — React 19 handles custom elements natively, Vue has always had good support, and Angular works seamlessly with custom elements.

For teams considering Web Components, the technology is mature, the tooling is solid, and the use cases are clear. At StrikingWeb, we help organizations design and build Web Component libraries that deliver consistent user experiences across their entire application portfolio. If that sounds like a challenge your organization faces, we would be glad to help.

Web Components Lit Frontend