Web Components and Shadow DOM: Building Framework-Agnostic UI Elements

Web Components — Custom Elements, Shadow DOM, and HTML Templates — are native browser standards that let developers build reusable, encapsulated UI elements that work across any JavaScript framework or no framework at all. In 2026, with all major browsers supporting the full Web Components specification, Indian development teams building design systems, component libraries, or micro-frontend architectures are increasingly adopting Web Components to avoid framework lock-in and ensure long-term maintainability.

Last updated October 2026

What Are Web Components and Why Should You Use Them?

Web Components consist of three main specifications:

• Custom Elements: Define your own HTML tags (e.g., <mad-button>, <mad-card>) with custom behaviour.
• Shadow DOM: Encapsulate a component’s DOM and styles so they do not leak into or get affected by the parent page’s styles.
• HTML Templates: <template> and <slot> elements for defining reusable markup structures.

The primary advantage is framework independence. A Web Component built today works in React, Angular, Vue, Svelte, WordPress, Shopify, or plain HTML. For Indian agencies like The MAD that build across multiple platforms and frameworks, Web Components provide a single source of truth for UI elements.

How Do You Create a Custom Element?

A custom element is a JavaScript class that extends HTMLElement and is registered with a hyphenated tag name. The class defines lifecycle callbacks:

• constructor(): Initialise the component, attach Shadow DOM, set up initial state.
• connectedCallback(): Called when the element is added to the DOM. Fetch data, start animations, add event listeners here.
• disconnectedCallback(): Called when removed from the DOM. Clean up event listeners, timers, and observers.
• attributeChangedCallback(name, oldVal, newVal): Called when an observed attribute changes. Update the component’s rendering.
• adoptedCallback(): Called when moved to a new document (rare, used with iframes).

The component is then registered with customElements.define('mad-button', MadButton). After registration, <mad-button> can be used in HTML just like any native element.

What Is Shadow DOM and How Does It Enable Encapsulation?

Shadow DOM creates an isolated DOM tree attached to an element. Styles defined inside the Shadow DOM do not affect the outside page, and external styles do not affect the Shadow DOM’s content. This is true CSS and DOM encapsulation — not achieved by CSS modules, BEM naming, or CSS-in-JS, which are convention-based rather than standard-enforced.

Key Shadow DOM concepts:

• Shadow Root: The root node of the shadow tree, created with this.attachShadow({ mode: 'open' }).
• mode: open vs closed: ‘open’ allows external JavaScript to access the shadow DOM via element.shadowRoot. ‘closed’ prevents access. Use ‘open’ for most components — ‘closed’ adds complexity without meaningful security benefits.
• CSS encapsulation: Styles in the shadow DOM are scoped. Use :host selector to style the component’s outer element, ::slotted() to style slotted content.
• CSS Custom Properties penetrate Shadow DOM: This is by design and is the recommended way to create themeable components. Define --mad-button-color in the parent and use it inside the shadow DOM.

How Do Slots and Templates Work?

Slots allow component consumers to inject content into predefined locations within the component’s Shadow DOM. Named slots provide multiple injection points:

The <template> element holds inert markup that is not rendered until explicitly cloned. Combined with Shadow DOM, it provides an efficient way to define component structure. The template’s content is cloned for each component instance, avoiding the performance overhead of innerHTML parsing.

Building a Practical Component: Notification Toast

A notification toast component demonstrates key Web Component patterns: it accepts attributes for type (success, error, warning, info) and message, renders with encapsulated styles, auto-dismisses after a configurable duration, and provides a close button. It works identically whether dropped into a React app, a WordPress site, or a static HTML page.

The component uses CSS Custom Properties for theming (colours can be overridden by the parent), transition animations for enter/exit, and the attributeChangedCallback lifecycle to update dynamically.

Web Components in Design Systems

For organisations maintaining a design system across multiple products and frameworks, Web Components are the ideal foundation:

• Single source of truth: One component library used by React, Angular, Vue, and server-rendered pages.
• Framework migration safety: If you migrate from Angular to React (common in Indian enterprise), your Web Components remain unchanged.
• Third-party integration: Embed your components in partner sites, WordPress plugins, or Shopify themes without framework dependencies.
• Testing: Test once, works everywhere. No framework-specific testing setup required.

Libraries like Lit (by Google) and Stencil (by Ionic) simplify Web Component development with reactive properties, efficient rendering, and TypeScript support while still producing standard Web Components.

Performance Considerations

• Shadow DOM has near-zero overhead: Modern browsers handle Shadow DOM as efficiently as regular DOM.
• Avoid excessive Shadow DOM nesting: Deeply nested shadow trees (component inside component inside component) can slow down style calculation.
• Lazy loading: Use dynamic imports to load component definitions only when the element appears in the DOM.
• SSR challenges: Shadow DOM does not natively support server-side rendering. Declarative Shadow DOM (supported in Chrome, Safari, Firefox) partially addresses this. For SEO-critical content, ensure important text is in the light DOM or use progressive enhancement.

Framework Interoperability

Web Components work natively in all frameworks, but with some nuances:

• React: React 19+ has improved Web Component support. Properties are passed correctly, and events bubble as expected. Earlier React versions required workarounds for custom events.
• Angular: Add CUSTOM_ELEMENTS_SCHEMA to the module. Angular handles Web Components well.
• Vue: Configure compilerOptions.isCustomElement in vite.config.js to tell Vue to treat hyphenated tags as custom elements.
• WordPress / Elementor: Web Components work in WordPress via Custom HTML widgets or Elementor HTML elements. This is useful for embedding interactive components in WordPress sites without plugins.

How The MAD Uses Web Components

At The MAD, we build shared UI components as Web Components for our SaaS products (ScanMeUp, DigiVCard, DigiPortfolio) and embed them across different technology stacks. We also build custom Web Components for clients who need reusable, framework-agnostic UI elements. Component library development starts at ₹1,00,000 for a basic design system and scales based on component count and complexity.

Frequently Asked Questions

Are Web Components supported in all browsers?

Yes, as of 2026. Chrome, Firefox, Safari, and Edge all fully support Custom Elements, Shadow DOM, and HTML Templates. For older browsers (IE11 is effectively dead), polyfills are available but rarely needed.

Should I use Web Components instead of React or Vue?

Not instead of — alongside. Web Components excel at creating reusable, framework-agnostic UI primitives (buttons, inputs, cards, modals). Frameworks like React and Vue are better for application architecture, state management, routing, and complex UI logic. The ideal approach is Web Components for the design system, framework for the application.

How do Web Components handle state management?

Web Components manage internal state through class properties and re-render on changes. For complex state shared across components, use an external state management solution (Redux, Zustand, or a simple event bus). Libraries like Lit provide reactive properties that trigger re-renders automatically.

Can Web Components be server-side rendered?

Declarative Shadow DOM (DSD) allows Shadow DOM to be expressed in HTML without JavaScript, enabling SSR. It is supported in Chrome, Safari, and Firefox. For SSR-critical applications, use Lit SSR or ensure important content is in the light DOM with progressive enhancement.

What is the learning curve for Web Components?

If you know HTML, CSS, and JavaScript, you already know 80% of what is needed. The Custom Elements API and Shadow DOM concepts take 1–2 weeks to learn. Using a library like Lit reduces boilerplate and shortens the learning curve further. For Indian developers familiar with any framework, the transition is straightforward.