0Pricing
Micro Frontends Architecture with Module Federation · Lesson

Communicating with Custom DOM Events

Learn to use the browser native CustomEvent API as a lightweight, framework-agnostic communication channel between micro frontends.

Communicating with Custom DOM Events is a free Micro Frontends Architecture with Module Federation lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Micro Frontends Architecture with Module Federation learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Native Events?

The browser already has a built-in pub/sub system: the DOM event model. Using it for MFE communication needs no library and works across any framework.

The CustomEvent API

CustomEvent lets you create your own named events carrying a detail payload, dispatched on any DOM element including window.

const evt = new CustomEvent("cart:add", {
  detail: { productId: 42, qty: 1 }
});

Dispatching an Event

Any micro frontend can broadcast an event on a shared target such as window. Others do not need a direct reference to the sender.

window.dispatchEvent(new CustomEvent("cart:add", {
  detail: { productId: 42 }
}));

Listening for Events

A consuming MFE subscribes with addEventListener and reads the payload from event.detail.

window.addEventListener("cart:add", (e) => {
  updateCart(e.detail.productId);
});

Naming Conventions

Namespace event names to avoid collisions, for example cart:add or auth:login. A shared naming convention is part of your communication contract.

Cleaning Up Listeners

When a micro frontend unmounts, remove its listeners to prevent memory leaks and duplicate handling.

const handler = (e) => updateCart(e.detail);
window.addEventListener("cart:add", handler);
// on unmount:
window.removeEventListener("cart:add", handler);

Two-Way Communication

For request/response style flows, one MFE dispatches a request event and another replies with a separate response event, keeping each direction explicit.

window.dispatchEvent(new CustomEvent("user:request"));
window.addEventListener("user:response", e => show(e.detail));

Strengths of DOM Events

Native events are appealing because they are:

  • Framework-agnostic
  • Zero-dependency
  • Familiar to all web developers
  • Naturally decoupled (no shared references)

Limitations to Know

They also have downsides:

  • No type safety on detail
  • Easy to misspell event names
  • Hard to trace who listens to what
  • Not ideal for large or frequent payloads

Wrapping Events in a Typed Helper

To reduce mistakes, wrap dispatch and listen in a small typed module shared across MFEs, centralizing event names and payload shapes.

export function emit(name, detail) {
  window.dispatchEvent(new CustomEvent(name, { detail }));
}

When to Choose This Pattern

Custom DOM events shine for simple, occasional notifications between loosely coupled MFEs. For complex shared data, prefer a dedicated event bus or shared store.

Quick Check

Test your custom-event knowledge.

Recap

You learned native event communication:

  • CustomEvent carries data in detail
  • Dispatch on window; listen with addEventListener
  • Namespace names and clean up listeners
  • Great for simple, decoupled notifications
  • Wrap in a typed helper to avoid mistakes

DOM events are a zero-dependency MFE channel.

Frequently asked questions

Is the “Communicating with Custom DOM Events” lesson free?

Yes — the full text of “Communicating with Custom DOM Events” is free to read here on the web, and the Micro Frontends Architecture with Module Federation course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Micro Frontends Architecture with Module Federation course, upgrade to CoddyKit PRO.

What will I learn in “Communicating with Custom DOM Events”?

Learn to use the browser native CustomEvent API as a lightweight, framework-agnostic communication channel between micro frontends. You practise Micro Frontends Architecture with Module Federation with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Micro Frontends Architecture with Module Federation?

No prior experience is required. Micro Frontends Architecture with Module Federation on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Communicating with Custom DOM Events” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Micro Frontends Architecture with Module Federation lesson?

Yes. Every Micro Frontends Architecture with Module Federation lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Event Bus for Cross-App Communication
  2. Shared State Management
  3. Custom Communication Solutions
  4. Communicating with Custom DOM Events
← Back to Micro Frontends Architecture with Module Federation