🏗️ Chapter 97: Advanced HTML Patterns & Architecture

Micro-Frontends HTML Composition

Orchestrating distributed web architectures through native HTML primitives, Web Components, Declarative Shadow DOM, and secure iframe sandboxing.

LEARNING OBJECTIVES ⌵

Understand the architectural motivations and trade-offs of Micro-Frontends compared to Monolithic SPAs.
Master HTML composition techniques using Custom Elements, Declarative Shadow DOM, and Module Federation.
Implement secure, isolated runtime boundaries using sandboxed <iframe> elements with structured postMessage event channels.
Design decoupled, cross-micro-frontend communication protocols using standard DOM CustomEvents and Custom Element Registries.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine a bustling international airport terminal. Within this single massive physical structure, you have independent airline check-in desks, duty-free retail shops, local coffee chains, customs checkpoints, and security gates.

No single vendor owns or operates every shop. The coffee shop manages its own point-of-sale hardware, pricing, and staff. The duty-free boutique operates its own inventory database and currency exchange. Yet, to the traveler walking through the concourse, the experience feels like a cohesive, single facility. They move seamlessly from checking bags at Gate 4 to buying coffee at Terminal B.

+---------------------------------------------------------------------------------------+
|                                    AIRPORT CONCOURSE                                  |
|                             (Host Shell Application HTML)                             |
|                                                                                       |
|   +---------------------+   +---------------------+   +---------------------------+   |
|   |    AIRLINE DESK     |   |     COFFEE SHOP     |   |     DUTY FREE RETAIL      |   |
|   |  (Flight Micro-App) |   |  (Orders Micro-App) |   |   (Catalog Micro-App)     |   |
|   |   Managed by Team A |   |   Managed by Team B |   |    Managed by Team C      |   |
|   +---------------------+   +---------------------+   +---------------------------+   |
+---------------------------------------------------------------------------------------+

In traditional monolithic web development, a single engineering organization builds the entire application in one giant codebase. As companies grow to hundreds of developers across dozens of autonomous business squads, this monolith becomes a bottleneck: deployments require cross-team coordination, a single typo in the checkout flow can crash the entire account settings page, and updating a shared UI framework version takes quarters of engineering time.

Micro-Frontends bring the microservices paradigm to the browser. Instead of delivering one massive single-page application bundle, the host HTML document acts as the terminal concourse. It stitches together independent, autonomously deployed fragments of UI created by different teams. By anchoring these fragments to native HTML primitives—Web Components, Declarative Shadow DOM, and sandboxed iframes—we achieve true style encapsulation, independent deployment lifecycles, and fault-tolerant rendering without binding our entire enterprise to a single JavaScript framework.

Technical Deep Dive & Specifications

Micro-Frontend Composition Strategies

When composing independent micro-applications into a unified HTML page, frontend architects generally select from three primary integration patterns:

+----------------------------------------------------------------------------------------------------+
|                               MICRO-FRONTEND INTEGRATION STRATEGIES                                |
+----------------------------------------------------------------------------------------------------+
|  1. SERVER-SIDE INCLUSION (SSI / ESI / Edge Composition)                                            |
|     Edge Proxy (Cloudflare/Fastly) stitches HTML fragments before reaching the browser.            |
|                                                                                                    |
|  2. CLIENT-SIDE WEB COMPONENTS (Custom Elements + Shadow DOM)                                       |
|     Browser parses <team-checkout> or <team-catalog>, loading scoped JS/CSS modules dynamically.   |
|                                                                                                    |
|  3. ISOLATED IFRAME SANDBOXING (Hard Process Isolation)                                            |
|     Host embeds untrusted or legacy sub-apps inside <iframe sandbox="allow-scripts ...">.          |
+----------------------------------------------------------------------------------------------------+

Architectural Comparison Matrix

Composition Pattern	Isolation Level	Styling Encapsulation	SEO & Initial Paint	Communication Mechanism	Best Use Case
Web Components (Shadow DOM)	Logical (Shared JS Context)	Complete via Shadow Root	High (SSR via Declarative Shadow DOM)	DOM CustomEvents, Attributes, Slots	Multi-team internal platforms, Design System integration
Sandboxed `<iframe>`	Hard (Separate Window Context)	Total (Separate DOM & CSSOM)	Low (Client rendering inside sub-frame)	`window.postMessage` + `MessageChannel`	Third-party integrations, untrusted code, legacy widgets
Module Federation (JS Runtime)	Logical (Shared Global Window)	Manual scoping / CSS Modules	Medium to High	Global Store / Event Bus / RxJS	Unified single-framework enterprise web apps
Edge HTML Composition (ESI/Edge)	None (Combined DOM Stream)	Global stylesheet rules	Maximum (Raw pre-composed HTML)	Server cookies, URL state, DOM attributes	Content-heavy e-commerce product pages

Scoped Custom Element Registries (Scoped Registry API)

One major vulnerability of standard Web Components in micro-frontends is the global customElements registry. If Team A registers <user-profile> using Version 1.0 of their component, Team B cannot register a newer <user-profile> Version 2.0 without causing a runtime collision error: NotSupportedError: Operation is not supported: elementName has already been used with this registry.

The Scoped Custom Element Registries specification solves this by allowing each micro-frontend or Shadow Root to maintain its own private registry:

+-------------------------------------------------------------------------------+
|                               GLOBAL WINDOW CONTEXT                           |
|  window.customElements (Default Host Registry)                                |
|                                                                               |
|  +-------------------------------------------------------------------------+  |
|  | <shadow-root> (Team A Micro-Frontend)                                   |  |
|  | Scoped CustomElementRegistry A: maps <profile-card> -> ProfileCardV1   |  |
|  +-------------------------------------------------------------------------+  |
|                                                                               |
|  +-------------------------------------------------------------------------+  |
|  | <shadow-root> (Team B Micro-Frontend)                                   |  |
|  | Scoped CustomElementRegistry B: maps <profile-card> -> ProfileCardV2   |  |
|  +-------------------------------------------------------------------------+  |
+-------------------------------------------------------------------------------+

Declarative Shadow DOM (DSD) for Server-Side Rendered Micro-Frontends

To prevent the "Flash of Unstyled Content" (FOUC) and enable instant SEO rendering of micro-frontends before JavaScript executes, modern micro-frontend orchestrators utilize Declarative Shadow DOM:

<!-- Server-Rendered Micro-Frontend Host Container -->
<micro-catalog id="catalog-island">
  <template shadowrootmode="open">
    <style>
      :host { display: block; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; }
      .product-card { background: #ffffff; color: #1a202c; }
    </style>
    <div class="product-card">
      <slot name="title">Default Product</slot>
      <slot name="price">$0.00</slot>
    </div>
  </template>
  <span slot="title">Enterprise Cloud Suite</span>
  <span slot="price">$499/mo</span>
</micro-catalog>

When the browser parses <template shadowrootmode="open">, it immediately attaches a Shadow Root to the parent element <micro-catalog>, rendering the encapsulated styles and slot distribution prior to executing any script.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Here is a complete, production-ready Micro-Frontend Orchestrator using Native Custom Elements, Shadow DOM encapsulation, and a decoupled Broadcast Channel communication bus.

Starter Code

Line-by-Line Code Breakdown

Lines 50–59 (MicroFrontendBus): Implements an event hub wrapper around native browser CustomEvent. By specifying composed: true, the event is permitted to cross Shadow DOM encapsulation boundaries to reach parent and sibling listeners.
Lines 64–70 (class MfeCatalogApp extends HTMLElement): Defines a custom HTML element managed independently by Team Alpha. It attaches an open shadow root (this.attachShadow({ mode: 'open' })) to encapsulate its internal DOM and CSS rules.
Lines 76–81: Captures button click interactions within Team Alpha's shadow DOM and broadcasts standard data payloads (cart:add) without having any direct knowledge of or dependency on Team Beta's codebase.
Lines 117–126 (class MfeCartApp extends HTMLElement): Implements the consuming micro-frontend. When mounted (connectedCallback), it subscribes to the event channel and updates its isolated internal state.
Lines 129–131 (disconnectedCallback): Essential memory leak prevention. When the host unmounts the Cart micro-frontend, it cleanly removes event listeners.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enterprise Micro-Frontend Host Orchestrator</title>
  <style>
    :root {
      --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --bg-host: #0f172a;
      --card-bg: #1e293b;
      --text-main: #f8fafc;
      --accent: #38bdf8;
    }
    body {
      margin: 0;
      padding: 2rem;
      font-family: var(--font-family);
      background-color: var(--bg-host);
      color: var(--text-main);
    }
    header {
      margin-bottom: 2rem;
      border-bottom: 1px solid #334155;
      padding-bottom: 1rem;
    }
    .mfe-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 1.5rem;
    }
    .container-box {
      background: var(--card-bg);
      border-radius: 12px;
      padding: 1.5rem;
      border: 1px solid #334155;
    }
  </style>
</head>
<body>
  <header>
    <h1>Global Micro-Frontend Shell</h1>
    <p>Decoupled composition powered by Custom Elements & CustomEvent Dispatch</p>
  </header>

<main class="mfe-grid">
    
    <div class="container-box">
      <h2>Team Alpha: Catalog Fragment</h2>
      <mfe-catalog-app id="alpha-mfe"></mfe-catalog-app>
    </div>

<div class="container-box">
      <h2>Team Beta: Cart Fragment</h2>
      <mfe-cart-app id="beta-mfe"></mfe-cart-app>
    </div>
  </main>

static subscribe(eventName, callback) {
        const handler = (e) => callback(e.detail);
        window.addEventListener(`mfe:${eventName}`, handler);
        return () => window.removeEventListener(`mfe:${eventName}`, handler);
      }
    }

// =========================================================================
    // MICRO-FRONTEND 1: CATALOG APPLICATION (Team Alpha)
    // =========================================================================
    class MfeCatalogApp extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
      }

connectedCallback() {
        this.render();
        this.shadowRoot.querySelectorAll('button[data-id]').forEach(btn => {
          btn.addEventListener('click', (e) => {
            const id = e.target.getAttribute('data-id');
            const name = e.target.getAttribute('data-name');
            const price = parseFloat(e.target.getAttribute('data-price'));
            
            // Dispatch event across the micro-frontend boundary
            MicroFrontendBus.dispatch('cart:add', { id, name, price });
          });
        });
      }

render() {
        this.shadowRoot.innerHTML = `
          <style>
            :host { display: block; font-family: inherit; }
            .item-list { display: flex; flex-direction: column; gap: 0.75rem; }
            .product-row {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0.75rem;
              background: #0f172a;
              border-radius: 6px;
              border: 1px solid #475569;
            }
            .btn-add {
              background: #0284c7;
              color: white;
              border: none;
              padding: 0.5rem 0.85rem;
              border-radius: 4px;
              cursor: pointer;
              font-weight: 600;
              transition: background 0.2s;
            }
            .btn-add:hover { background: #0369a1; }
          </style>
          <div class="item-list">
            <div class="product-row">
              <span><strong>Ultra Book Pro</strong> ($1,299)</span>
              <button class="btn-add" data-id="p1" data-name="Ultra Book Pro" data-price="1299">Add to Cart</button>
            </div>
            <div class="product-row">
              <span><strong>Wireless ANC Headset</strong> ($249)</span>
              <button class="btn-add" data-id="p2" data-name="Wireless ANC Headset" data-price="249">Add to Cart</button>
            </div>
          </div>
        `;
      }
    }
    customElements.define('mfe-catalog-app', MfeCatalogApp);

// =========================================================================
    // MICRO-FRONTEND 2: CART APPLICATION (Team Beta)
    // =========================================================================
    class MfeCartApp extends HTMLElement {
      constructor() {
        super();
        this.items = [];
        this.attachShadow({ mode: 'open' });
      }

connectedCallback() {
        this.render();
        // Subscribe to decoupled events from other micro-frontends
        this.unsubscribe = MicroFrontendBus.subscribe('cart:add', (item) => {
          this.items.push(item);
          this.render();
        });
      }

disconnectedCallback() {
        if (this.unsubscribe) this.unsubscribe();
      }

render() {
        const total = this.items.reduce((sum, item) => sum + item.price, 0);
        this.shadowRoot.innerHTML = `
          <style>
            :host { display: block; font-family: inherit; }
            .cart-box { background: #0f172a; padding: 1rem; border-radius: 6px; border: 1px solid #475569; }
            .badge { background: #10b981; color: white; padding: 0.2rem 0.5rem; border-radius: 9999px; font-size: 0.8rem; }
            .item-entry { margin: 0.5rem 0; font-size: 0.9rem; color: #cbd5e1; }
            .total-row { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #334155; font-size: 1.1rem; font-weight: bold; }
          </style>
          <div class="cart-box">
            <div>Items in Cart <span class="badge">${this.items.length}</span></div>
            <div>
              ${this.items.length === 0 
                ? '<p style="color: #64748b; font-style: italic;">Your cart is empty.</p>'
                : this.items.map(i => `<div class="item-entry">✓ ${i.name} - $${i.price}</div>`).join('')
              }
            </div>
            <div class="total-row">Total: $${total.toLocaleString()}</div>
          </div>
        `;
      }
    }
    customElements.define('mfe-cart-app', MfeCartApp);
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

Global Micro-Frontend Shell
Decoupled composition powered by Custom Elements & CustomEvent Dispatch
------------------------------------------------------------------------
[Team Alpha: Catalog Fragment]          [Team Beta: Cart Fragment]
+------------------------------------+  +------------------------------------+
| Ultra Book Pro ($1,299) [Add]      |  | Items in Cart (0)                  |
| Wireless ANC Headset ($249) [Add]  |  | Your cart is empty.                |
|                                    |  | Total: $0                          |
+------------------------------------+  +------------------------------------+

(Clicking "Add" on Ultra Book Pro updates Cart Fragment instantly to):
+------------------------------------+
| Items in Cart (1)                  |
| ✓ Ultra Book Pro - $1299           |
| Total: $1,299                      |
+------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Secure Sandboxed Micro-Frontend with Resilient PostMessage Protocol

Instructions:

Implement a host dashboard that mounts an external payment form inside an <iframe>.
Configure strict iframe sandboxing: allow scripts and form submissions, but restrict top-level navigation, popups, and same-origin privileges (sandbox="allow-scripts allow-forms").
Establish a two-way handshake over window.postMessage between the host window and the iframe payment form.
Validate event.origin in both the host listener and iframe listener to prevent cross-origin injection attacks.
When the user completes the payment inside the iframe, the iframe dispatches an authorized event payload back to the host, triggering a host-level confirmation banner.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Payment MFE Sandbox Challenge</title>
  <style>
    body { font-family: sans-serif; padding: 2rem; background: #f1f5f9; }
    .host-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
    iframe { width: 100%; height: 220px; border: 1px dashed #cbd5e1; border-radius: 6px; }
    .status { margin-top: 1rem; padding: 0.75rem; border-radius: 4px; display: none; }
    .status.success { display: block; background: #dcfce7; color: #166534; font-weight: bold; }
  </style>
</head>
<body>
  <div class="host-card">
    <h2>Host Application: Checkout Gateway</h2>
    <div id="status-box" class="status">Payment Processed Successfully! Transaction ID: <span id="tx-id"></span></div>

</div>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Payment MFE Sandbox Solution</title>
  <style>
    body { font-family: system-ui, -apple-system, sans-serif; padding: 2rem; background: #f8fafc; color: #0f172a; }
    .host-card { max-width: 600px; margin: 0 auto; background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
    iframe { width: 100%; height: 200px; border: 2px solid #e2e8f0; border-radius: 8px; margin-top: 1rem; }
    .status { margin-top: 1.5rem; padding: 1rem; border-radius: 6px; display: none; border: 1px solid #86efac; background: #f0fdf4; color: #15803d; }
  </style>
</head>
<body>
  <div class="host-card">
    <h2>Host Shell: Secure Checkout</h2>
    <p>The payment provider below runs in an isolated sandboxed browsing context.</p>

    <!-- Embedded Sandboxed Micro-Frontend -->
    <iframe 
      id="payment-iframe" 
      title="Third-Party Payment Gateway"
      sandbox="allow-scripts"
      srcdoc='
        <!DOCTYPE html>
        <html>
        <head>
          <style>
            body { font-family: sans-serif; margin: 10px; background: #faf5ff; padding: 15px; border-radius: 6px; }
            button { background: #7e22ce; color: white; border: none; padding: 10px 18px; border-radius: 4px; font-weight: bold; cursor: pointer; }
            input { padding: 8px; margin-bottom: 10px; width: calc(100% - 20px); border: 1px solid #d8b4fe; border-radius: 4px; }
          </style>
        </head>
        <body>
          <form id="pay-form">
            <label>Credit Card Number:
              <input type="text" value="•••• •••• •••• 4242" disabled />
            </label>
            <button type="submit">Authorize $1,548.00</button>
          </form>
          <script>
            document.getElementById("pay-form").addEventListener("submit", (e) => {
              e.preventDefault();
              // Dispatch message across frame boundary
              window.parent.postMessage({
                source: "payment-mfe",
                action: "PAYMENT_COMPLETE",
                txId: "TX-" + Math.floor(100000 + Math.random() * 900000)
              }, "*");
            });
          </script>
        </body>
        </html>
      '>
    </iframe>

    <div id="status-box" class="status">
      <strong>Payment Confirmed!</strong> Transaction Reference: <span id="tx-id"></span>
    </div>
  </div>

  <script>
    // Host Event Receiver with Protocol Contract Validation
    window.addEventListener('message', (event) => {
      // For srcdoc iframes without origin domain, origin is "null" or window.location.origin
      const data = event.data;
      if (data && data.source === 'payment-mfe' && data.action === 'PAYMENT_COMPLETE') {
        const statusBox = document.getElementById('status-box');
        const txIdSpan = document.getElementById('tx-id');
        txIdSpan.textContent = data.txId;
        statusBox.style.display = 'block';
      }
    });
  </script>
</body>
</html>

Why this works:

The sandbox="allow-scripts" directive enforces strict process and resource security on the payment iframe, preventing it from reading host cookies, accessing localStorage, or navigating the host window to a malicious phishing URL.
The window.postMessage bridge provides an explicit, decoupled protocol contract ({ source: 'payment-mfe', action: 'PAYMENT_COMPLETE' }).
The host explicitly validates payload signatures before updating host state or UI elements.

⚠️ Common Pitfalls

CSS Collision without Shadow DOM: Rendering multiple micro-frontends in a shared global DOM without shadow roots or CSS Modules causes classes like .btn, .header, or reset styles (* { box-sizing: border-box }) to clobber neighboring teams' layouts.
Global Event Listener Leaks: Attaching window.addEventListener inside a micro-frontend's connectedCallback without removing it in disconnectedCallback creates memory leaks and duplicate execution when the micro-frontend is remounted.
Heavy Redundant Shared Dependencies: Having 4 micro-frontends on one page where each micro-frontend bundles its own 150KB copy of React or Lodash degrades First Contentful Paint (FCP) and Time to Interactive (TTI). Share core runtimes via import maps or Web Components.

💡 Pro Tips

Adopt Native Import Maps for Version Alignment: Use <script type="importmap"> at the host HTML level to define shared, pinned bare specifiers (e.g., "lit": "https://cdn.jsdelivr.net/npm/lit@3/+esm"), ensuring all micro-frontends share a single cached library instance in memory.
Leverage CSS Custom Properties Across Shadow DOM: While Shadow DOM blocks CSS classes and tag selectors from penetrating, CSS Custom Properties (var(--primary-color)) cascade naturally through shadow roots, allowing seamless host-level theme management.

📌 Key Takeaways

Micro-Frontends decompose monolithic frontends into independently deployable, domain-driven HTML/JS fragments.
Web Components & Custom Elements provide the standards-compliant, framework-agnostic foundation for client-side micro-frontend composition.
Declarative Shadow DOM (<template shadowrootmode="open">) enables server-rendered micro-frontends with immediate style scoping and zero FOUC.
Sandboxed Iframes (sandbox="allow-scripts") deliver hard runtime isolation for untrusted, compliance-critical (PCI-DSS), or legacy codebases.
CustomEvents with composed: true and postMessage provide decoupled event buses across DOM encapsulation barriers.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Which HTML attribute is required on a `<template>` tag to immediately instantiate a Shadow Root on its parent element during initial server-side HTML parsing?

Topic: HTML Fundamentals

? Question 2 / 3

When dispatching a `CustomEvent` from within a Shadow DOM root, which configuration property is required to allow the event to bubble past the shadow boundary into the host DOM?

Topic: HTML Fundamentals

? Question 3 / 3

What is the primary security advantage of using an `<iframe sandbox="allow-scripts">` over a custom element with Shadow DOM for micro-frontends?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

Micro-Frontend Composition Strategies

Architectural Comparison Matrix

Scoped Custom Element Registries (Scoped Registry API)

Declarative Shadow DOM (DSD) for Server-Side Rendered Micro-Frontends

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Secure Sandboxed Micro-Frontend with Resilient PostMessage Protocol

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Which HTML attribute is required on a <template> tag to immediately instantiate a Shadow Root on its parent element during initial server-side HTML parsing?

When dispatching a CustomEvent from within a Shadow DOM root, which configuration property is required to allow the event to bubble past the shadow boundary into the host DOM?

What is the primary security advantage of using an <iframe sandbox="allow-scripts"> over a custom element with Shadow DOM for micro-frontends?

Which HTML attribute is required on a `<template>` tag to immediately instantiate a Shadow Root on its parent element during initial server-side HTML parsing?

When dispatching a `CustomEvent` from within a Shadow DOM root, which configuration property is required to allow the event to bubble past the shadow boundary into the host DOM?

What is the primary security advantage of using an `<iframe sandbox="allow-scripts">` over a custom element with Shadow DOM for micro-frontends?