Chapter 84: HTML Templates & Slots

Named Slots & Viewport Architecture

Multi-slot layout composition, the `name` and `slot` attribute distribution rules, collision resolution, and ordered multi-element projection.

LEARNING OBJECTIVES ⌵

Implement multi-slot component layouts using named <slot name="..."> elements.
Bind consumer Light DOM elements to specific Shadow DOM viewports using the slot attribute.
Understand the browser's slot resolution rules for multiple elements assigned to the same slot name.
Handle unassigned slot attributes and duplicate shadow slot names according to the WHATWG specification.

🎬 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 an international shipping terminal with a giant cargo airplane. The airplane fuselage is carefully divided into specialized compartments:

The Upper Cockpit (designated for flight crew and navigation instruments).
The Climate-Controlled Mid-Deck (designated for perishable agricultural goods).
The Lower Cargo Hold (designated for heavy bulk containers).

+-------------------------------------------------------------------------------+
|                           CARGO AIRPLANE COMPARTMENTS                         |
|                                                                               |
|   +-------------------------- FUSELAGE (Shadow DOM) ----------------------+   |
|   |  [ Cockpit Bay ]       -->  <slot name="flight-deck">                 |   |
|   |  [ Climate Cargo Bay ] -->  <slot name="perishables">                 |   |
|   |  [ General Cargo Hold] -->  <slot> (Default catch-all)                |   |
|   |  [ Heavy Cargo Bay ]   -->  <slot name="heavy-hold">                  |   |
|   +-----------------------------------------------------------------------+   |
|                                     ^                                         |
|                                     | Routed by tag label                     |
|   +---------------------------------+-------------------------------------+   |
|   |  CARGO PACKAGES (Light DOM Elements):                                 |   |
|   |  - <div slot="flight-deck">Captain Rivera</div>                       |   |
|   |  - <div slot="perishables">Strawberries</div>                         |   |
|   |  - <div slot="heavy-hold">Steel Coils</div>                           |   |
|   |  - <div>Standard Suitcases</div>  <-- (Goes to default catch-all slot)|   |
|   +-----------------------------------------------------------------------+   |
+-------------------------------------------------------------------------------+

When ground crew load the plane, each pallet is stamped with a colored cargo label (slot="perishables"). The automated conveyor system reads the label and slides the pallet into the exact matching internal bay (<slot name="perishables">), regardless of the order in which the pallets arrived on the tarmac.

Technical Deep Dive & Specifications

The Named Slot Specification

In the WHATWG DOM Standard, <slot> elements may specify a name attribute. Elements in the host's Light DOM specify which slot they want to project into using the slot attribute:

<!-- Inside Component's Shadow DOM -->
<header>
  <slot name="header"></slot>
</header>
<main>
  <slot></slot> <!-- Default unnamed slot -->
</main>
<footer>
  <slot name="footer"></slot>
</footer>

<!-- Consumer Light DOM Usage -->
<app-layout>
  <h1 slot="header">Dashboard Analytics</h1>
  <p>Main body content automatically goes to the unnamed slot.</p>
  <button slot="footer">Confirm & Save</button>
</app-layout>

Distribution Algorithm Matrix & Edge Cases

Scenario	Light DOM Attribute	Shadow DOM Slot	Result / Behavior
Exact Named Match	`<span slot="nav">`	`<slot name="nav">`	Projected cleanly into `<slot name="nav">`.
No Slot Attribute	`<p>Text</p>`	`<slot></slot>`	Projected into the default (unnamed) slot.
Multiple Elements Same Slot	`<li slot="item">A</li><li slot="item">B</li>`	`<slot name="item">`	Both elements are projected into that slot in their Light DOM document order.
Unmatched Slot Name	`<div slot="sidebar">`	No `<slot name="sidebar">`	Element is omitted from the Composed Tree (hidden from visual rendering and accessibility tree).
Duplicate Shadow Slots	`<p slot="info">`	`<slot name="info">` #1 AND `<slot name="info">` #2	First slot wins. All nodes matching `"info"` are projected into the first `<slot name="info">`. The second slot receives nothing.

                LIGHT DOM                               SHADOW DOM
       +-------------------------+              +-------------------------+
 (1)   | <h2 slot="title">       | ───────────> | <slot name="title">     |
       +-------------------------+              +-------------------------+
 (2)   | <button slot="actions"> | ────┐        +-------------------------+
       +-------------------------+     └──────> | <slot name="actions">   |
 (3)   | <button slot="actions"> | ────┘        +-------------------------+
       +-------------------------+              +-------------------------+
 (4)   | <p>General paragraph</p>| ───────────> | <slot> (Default Catch)  |
       +-------------------------+              +-------------------------+
 (5)   | <span slot="missing">   | ───────────> ❌ [Dropped / Not Drawn]
       +-------------------------+

Styling Named Slots

You can target elements projected into specific slots using attribute selectors inside ::slotted():

/* Inside Shadow DOM */
::slotted([slot="header"]) {
  font-size: 1.5rem;
  font-weight: bold;
  color: #38bdf8;
}

::slotted([slot="actions"]) {
  display: flex;
  gap: 0.5rem;
}

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

Starter Code

Line-by-Line Code Breakdown

Line 18–33 (<dashboard-card>...): Consumer light DOM markup declaring children bound to "icon", "title", "actions", "footer", and the default unnamed slot.
Line 81–87 (<slot name="icon">, <slot name="title">, <slot name="actions">): Named slot injection points in the header bar.
Line 90 (<slot></slot>): The default slot rendering the two unannotated <p> tags.
Line 94 (<slot name="footer"></slot>): Named slot for status metadata and timestamps.

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">
  <title>Named Slots Architecture</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #0f172a; color: #f8fafc; padding: 2rem; }
    .btn { padding: 0.5rem 1rem; border-radius: 6px; border: none; font-weight: 600; cursor: pointer; }
    .btn-primary { background: #38bdf8; color: #0f172a; }
    .btn-secondary { background: #334155; color: #f8fafc; }
  </style>
</head>
<body>

<h1>Dashboard Card (Multi-Slot Composition)</h1>

<dashboard-card>
    
    <span slot="icon" style="font-size: 1.5rem;">📊</span>

<span slot="title">Real-Time User Traffic</span>

<div slot="actions">
      <button class="btn btn-secondary">Export CSV</button>
      <button class="btn btn-primary">Refresh</button>
    </div>

<p>Current active concurrent sessions: <strong>14,892</strong></p>
    <p>Edge ingress latency: <strong>18ms</strong> (99th percentile).</p>

<small slot="footer">Telemetry updated 3 seconds ago via WebSocket.</small>
  </dashboard-card>

this.shadowRoot.innerHTML = `
          <style>
            :host {
              display: block;
              max-width: 600px;
              background: #1e293b;
              border: 1px solid #334155;
              border-radius: 12px;
              overflow: hidden;
              box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
            }
            .header-bar {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 1rem 1.5rem;
              background: #1e293b;
              border-bottom: 1px solid #334155;
            }
            .title-area {
              display: flex;
              align-items: center;
              gap: 0.75rem;
              font-size: 1.15rem;
              font-weight: 700;
              color: #f8fafc;
            }
            .body-area {
              padding: 1.5rem;
              color: #94a3b8;
              line-height: 1.6;
            }
            .footer-bar {
              padding: 0.75rem 1.5rem;
              background: #0f172a80;
              border-top: 1px solid #334155;
              color: #64748b;
              font-size: 0.85rem;
            }
            ::slotted([slot="title"]) {
              color: #38bdf8;
            }
          </style>

<div class="footer-bar">
            <slot name="footer"></slot>
          </div>
        `;
      }
    }

customElements.define('dashboard-card', DashboardCard);
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+-------------------------------------------------------------------+
| 📊 Real-Time User Traffic                    [Export CSV] [Refresh]|
+-------------------------------------------------------------------+
| Current active concurrent sessions: 14,892                        |
| Edge ingress latency: 18ms (99th percentile).                     |
+-------------------------------------------------------------------+
| Telemetry updated 3 seconds ago via WebSocket.                    |
+-------------------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Reusable `<modal-dialog>` with 3 Named Slots

Instructions:

Define a <modal-dialog> custom element with open Shadow DOM.
Provide 3 named slots:
- name="header" (Modal title and icon)
- name="body" (Main interactive body or form)
- name="footer" (Action buttons: Cancel, Submit)
Include an overlay backdrop (position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;).
Support closing the modal when clicking an internal ✕ button that dispatches a custom 'close-modal' event.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modal Dialog Challenge</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #0f172a; color: #f8fafc; padding: 2rem; }
    .btn { padding: 0.6rem 1.2rem; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; }
    .btn-blue { background: #38bdf8; color: #0f172a; }
    .btn-gray { background: #475569; color: #f8fafc; }
  </style>
</head>
<body>
  <h1>Modal Dialog Challenge</h1>
  <button id="open-btn" class="btn btn-blue">Open User Modal</button>

  <modal-dialog id="user-modal" hidden>
    <h2 slot="header" style="margin:0; font-size:1.25rem; color:#38bdf8;">Edit Profile</h2>
    <div slot="body">
      <p style="color:#94a3b8; margin-top:0;">Update your public display preferences.</p>
      <input type="text" value="Alex Rivera" style="width:100%; padding:0.5rem; border-radius:4px; border:1px solid #475569; background:#0f172a; color:white; box-sizing:border-box;">
    </div>
    <div slot="footer" style="display:flex; justify-content:flex-end; gap:0.5rem;">
      <button class="btn btn-gray" id="cancel-btn">Cancel</button>
      <button class="btn btn-blue" id="save-btn">Save Changes</button>
    </div>
  </modal-dialog>

  <script>
    class ModalDialog extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
          <style>
            :host([hidden]) { display: none !important; }
            .backdrop {
              position: fixed; inset: 0; background: rgba(0,0,0,0.75);
              backdrop-filter: blur(4px); display: flex;
              align-items: center; justify-content: center; z-index: 1000;
            }
            .dialog {
              background: #1e293b; border: 1px solid #334155;
              border-radius: 12px; width: 90%; max-width: 480px;
              box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5);
              display: flex; flex-direction: column;
            }
            .header {
              padding: 1.25rem 1.5rem; border-bottom: 1px solid #334155;
              display: flex; justify-content: space-between; align-items: center;
            }
            .close-btn {
              background: transparent; border: none; color: #94a3b8;
              font-size: 1.25rem; cursor: pointer; line-height: 1;
            }
            .close-btn:hover { color: #f8fafc; }
            .body { padding: 1.5rem; }
            .footer { padding: 1rem 1.5rem; border-top: 1px solid #334155; background: #0f172a50; }
          </style>
          <div class="backdrop">
            <div class="dialog" role="dialog" aria-modal="true">
              <div class="header">
                <slot name="header"></slot>
                <button class="close-btn" aria-label="Close dialog">✕</button>
              </div>
              <div class="body">
                <slot name="body"></slot>
              </div>
              <div class="footer">
                <slot name="footer"></slot>
              </div>
            </div>
          </div>
        `;

        this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => {
          this.close();
        });
      }

      open() { this.removeAttribute('hidden'); }
      close() {
        this.setAttribute('hidden', '');
        this.dispatchEvent(new CustomEvent('modal-closed', { bubbles: true, composed: true }));
      }
    }

    customElements.define('modal-dialog', ModalDialog);

    const modal = document.getElementById('user-modal');
    document.getElementById('open-btn').addEventListener('click', () => modal.open());
    document.getElementById('cancel-btn').addEventListener('click', () => modal.close());
    document.getElementById('save-btn').addEventListener('click', () => {
      alert('Profile saved!');
      modal.close();
    });
  </script>
</body>
</html>

Why this works:

The modal layout is divided into 3 named slots (header, body, footer), giving full styling control of content to the host while locking dialog mechanics and backdrop blur inside the Shadow DOM.
The close() method sets the hidden attribute and dispatches a composed modal-closed event.

⚠️ Common Pitfalls

Misspelled Slot Names: If consumer writes <h2 slot="heeder"> instead of slot="header", the element will not match any named slot and will be completely hidden from the rendered view.
Placing Multiple <slot name="xyz"> with the Same Name in Shadow DOM: The browser only projects matching nodes into the first slot with that name. Subsequent slots with the same name remain empty.
Attempting to Slot Text Nodes Directly into Named Slots: Text nodes without an enclosing element cannot have attributes (you cannot write "My Title" slot="header"). Always wrap text in a <span>, <h2>, or <div> to assign a slot attribute.

💡 Pro Tips

Multiple Elements in a Single Slot: Remember that a named slot can receive multiple Light DOM nodes. For example, <slot name="actions"> can receive 4 distinct <button slot="actions"> elements rendered consecutively.
Progressive Slot Forwarding: In complex composite components (e.g. <table-widget> wrapping <table-row>), you can forward slots through multiple component layers by declaring <slot name="header" slot="header"></slot>.

📌 Key Takeaways

Named slots use <slot name="identifier"> in the Shadow DOM and slot="identifier" in the Light DOM.
Elements without a slot attribute default to the unnamed <slot></slot>.
Multiple Light DOM elements can target the same named slot, rendering in source document order.
Light DOM elements targeting a non-existent slot name are omitted from the rendered Composed Tree.
Duplicate named slots inside the same shadow root are resolved by assigning all nodes to the first instance.
--

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

? Question 1 / 3

If a consumer element specifies `slot="sidebar"`, but the custom element's Shadow DOM contains only `<slot name="header"></slot>` and `<slot></slot>`, where will the element be rendered?

Topic: HTML Fundamentals

? Question 2 / 3

What happens when three distinct `<button slot="actions">` elements are provided in the Light DOM to a single `<slot name="actions">` in the Shadow DOM?

Topic: HTML Fundamentals

? Question 3 / 3

Can a raw string / text node (`"Hello World"`) have a named `slot` attribute assigned directly without an enclosing element tag?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The Named Slot Specification

Distribution Algorithm Matrix & Edge Cases

Styling Named Slots

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Reusable <modal-dialog> with 3 Named Slots

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

If a consumer element specifies slot="sidebar", but the custom element's Shadow DOM contains only <slot name="header"></slot> and <slot></slot>, where will the element be rendered?

What happens when three distinct <button slot="actions"> elements are provided in the Light DOM to a single <slot name="actions"> in the Shadow DOM?

Can a raw string / text node ("Hello World") have a named slot attribute assigned directly without an enclosing element tag?

🎯 The Challenge: Build a Reusable `<modal-dialog>` with 3 Named Slots

If a consumer element specifies `slot="sidebar"`, but the custom element's Shadow DOM contains only `<slot name="header"></slot>` and `<slot></slot>`, where will the element be rendered?

What happens when three distinct `<button slot="actions">` elements are provided in the Light DOM to a single `<slot name="actions">` in the Shadow DOM?

Can a raw string / text node (`"Hello World"`) have a named `slot` attribute assigned directly without an enclosing element tag?