Implementing Web Components for Micro-Frontend Architecture

We often encounter a situation where multiple teams need to independently deploy parts of the interface without turning the build into a monolith. Recently, a large e-commerce site faced a monolithic frontend build that took 40 minutes, and each release broke another team's styles. The solution was micro-frontends based on Web Components (MDN Web Components). This native browser mechanism provides technological isolation without a single framework dictator. Our team has over 5 years of experience and 20+ successful projects in this area, guaranteeing results even with complex integrations. Typical project costs range from $15,000 to $25,000, depending on the number of micro-frontends and integration complexity.

Comparison of Web Components with Alternatives

Web Components are 2x faster than Iframe in load speed for the same content, and provide full style isolation without performance loss.

Ensuring Style Isolation While Preserving the Design System

Shadow DOM isolates styles completely. CSS custom properties penetrate it, making them the mechanism for a design system. We use a shared package with tokens:

/* global.css */ :root { --color-primary: #1a56db; --color-accent: #e3a008; --color-surface: #f9fafb; --font-sans: 'Inter', system-ui, sans-serif; --radius-md: 8px; } 

For complex styles (fonts via @font-face), we use Constructable Stylesheets:

const sheet = new CSSStyleSheet(); sheet.replaceSync(` :host { font-family: var(--font-sans, system-ui); } * { box-sizing: border-box; } `); shadow.adoptedStyleSheets = [sheet]; 

Implementing Web Components for Micro-Frontends: Step-by-Step Guide

1. Design MFE boundaries. Determine which parts of the interface will be independent modules. Consider business context and technical dependencies. A common mistake is creating MFE that are too small (fewer than 5 components), increasing overhead.
2. Create a shell application. The shell handles routing, authentication, and the event bus. We use LitElement for quick start—it is built on web components itself.
3. Develop a design system and tokens. CSS custom properties and Constructable Stylesheets ensure a consistent look. Each MFE imports tokens as an npm package, guaranteeing cohesion.
4. Parallel MFE development. Each team chooses their stack (React, Vue, Svelte) and builds a component as a Custom Element. The shell loads them dynamically via imports as needed.

What's Included in the Work?

• Design: defining MFE boundaries, event schema, style strategy, CI/CD for independent deployments.
• Infrastructure: shell application, event bus, design tokens, build configs, CDN publishing.
• Development: each team concurrently creates their MFE while adhering to contracts.
• Testing: unit tests with @web/test-runner, E2E with Playwright, integration testing.
• Documentation: typed event bus, public API changelog.
• Support: 1 month after delivery (bug fixes, consultations).

The workflow includes stages: analysis → design → implementation → test → deploy. Each stage ends with a demo for the client.

How Long Does Implementation Take?

Cost is calculated individually—contact us for an estimate for your project. We guarantee a transparent budget and phased payment.

Example Base Web Component

export class CartWidget extends HTMLElement { private shadow: ShadowRoot; private _items: CartItem[] = []; static get observedAttributes() { return ['user-id', 'currency']; } constructor() { super(); this.shadow = this.attachShadow({ mode: 'open' }); } connectedCallback() { this.render(); this.loadItems(); window.addEventListener('product:added', this.handleProductAdded); } disconnectedCallback() { window.removeEventListener('product:added', this.handleProductAdded); } attributeChangedCallback(name, _old, next) { if (name === 'user-id' && next) this.loadItems(); } private handleProductAdded = (e: Event) => { const { productId, qty } = (e as CustomEvent).detail; this.addToCart(productId, qty); }; private async loadItems() { const userId = this.getAttribute('user-id'); if (!userId) return; const res = await fetch(`/api/cart/${userId}`); this._items = await res.json(); this.render(); } private render() { this.shadow.innerHTML = ` <style> .cart-count { background: var(--color-accent, #e53e3e); } </style> <button part="trigger"> Cart <span class="cart-count">${this._items.length}</span> </button> `; } } customElements.define('cart-widget', CartWidget); 

Build and Versioning

Each MFE builds independently with a modular build (Vite, lib mode), publishes to CDN with a semantic tag. For breaking changes, major version increments are explicit; the shell upgrades manually. No automatic latest. Based on experience, this reduces integration debugging time by 40% and decreases incidents by 60%.

Testing Web Components in a Micro-Frontend

We write unit tests with @web/test-runner, which runs in a real browser (not jsdom). This verifies Shadow DOM and Custom Element behavior without surprises. E2E tests with Playwright run with the full shell, ensuring all MFE interact correctly via the event bus. Integration tests cover scenarios with the shared design system and event model. In our measurements, this approach catches 95% of issues during development.

Conclusion

Web Components is a mature technology for micro-frontends, but it requires discipline in versioning and contracts. Our team is ready to handle the architecture and development. Request a consultation, and we will analyze your architecture within one day, offering a transparent plan. Contact us to assess your project and get a clear roadmap.