Chapter 84: HTML Templates & Slots

Building an Enterprise media-card Component

Designing and shipping a production-ready custom element with multi-slot composition, fallback media, slotted styling tokens, and accessible ARIA attributes.

LEARNING OBJECTIVES ⌵

Synthesize all Chapter 84 concepts into a production-grade <media-card> Web Component.
Architect a 5-slot layout: avatar, header, media, default body, and actions.
Implement declarative fallback states for media placeholders and action toolbars.
Apply CSS Custom Property theme bridges and ::slotted() styling rules.
Bind WAI-ARIA accessibility landmarks and handle dynamic slot mutations via slotchange.

🎬 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 enterprise design system engineering team at a Fortune 500 media conglomerate.

The design team needs a single, unified Media Card component used across 12 different product surfaces:

In the Social Feed, it displays a user avatar, author name, timestamp, an uploaded photo, user captions, and Like/Share buttons.
In the Video Streaming Portal, the avatar is omitted, the media slot receives an interactive <video> player, and the action slot contains a "Watch Trailer" button.
In the Press Release Feed, the media slot contains a company logo, and the action slot contains a "Download PDF" link.

+-------------------------------------------------------------------------------+
|                       ENTERPRISE <media-card> ANATOMY                         |
+-------------------------------------------------------------------------------+
|                                                                               |
|   +-----------------------------------------------------------------------+   |
|   |  HEADER VIEWPORT:                                                     |   |
|   |  [ <slot name="avatar"> ]  [ <slot name="header"> (Title + Subtitle) ]|   |
|   +-----------------------------------------------------------------------+   |
|   |  MEDIA VIEWPORT:                                                      |   |
|   |                                                                       |   |
|   |  [ <slot name="media"> (Image, Video, or SVG Fallback) ]              |   |
|   |                                                                       |   |
|   +-----------------------------------------------------------------------+   |
|   |  BODY VIEWPORT:                                                       |   |
|   |  [ <slot> (Default Unnamed Slot for Article / Rich Text) ]            |   |
|   +-----------------------------------------------------------------------+   |
|   |  ACTIONS VIEWPORT:                                                    |   |
|   |  [ <slot name="actions"> (Interactive Buttons / Links) ]              |   |
|   +-----------------------------------------------------------------------+   |
|                                                                               |
+-------------------------------------------------------------------------------+

Instead of writing 12 brittle variations with dozens of confusing boolean flags (hasAvatar={true}, mediaType="video", showFooter={false}), the team ships a single, highly composable <media-card> element powered natively by HTML Slots and Templates.

Technical Deep Dive & Specifications

The Enterprise Component Architecture

                                 <media-card>
                                      │
                     ┌────────────────┴────────────────┐
                     │                                 │
              Light DOM Nodes                  Shadow DOM Root
                     │                                 │
      ┌──────────────┼──────────────┐                  ├── Static Template (<template>)
      │              │              │                  ├── Theme Tokens (--media-card-*)
  slot="avatar" slot="header"  slot="media"            ├── Header Grid Layout
      │              │              │                  ├── Media Aspect Ratio Box (16:9)
      └──────────────┼──────────────┘                  ├── Body Padding Container
                     │                                 ├── Actions Flex Toolbar
            Composed Flat Tree                         └── slotchange Event Listeners
                     │                                     (Toggles empty-slot CSS)
                     v
           Rendered Visual Card

Slot Contract & Fallback Specifications

Slot Name	Intended Payload	Fallback Behavior When Omitted	Accessibility / ARIA Role
`name="avatar"`	Circular `<img>`, `<svg>`, or avatar badge	Renders a neutral geometric avatar placeholder.	`aria-hidden="true"` on decorative avatar.
`name="header"`	`<h3>` title and metadata spans	Renders `<h3>Untitled Broadcast</h3>`.	`role="heading" aria-level="3"`.
`name="media"`	`<img>`, `<video>`, or `<iframe>`	Renders a high-contrast blueprint SVG illustration.	Media wrapper with semantic `<figure>`.
(Default)	Paragraphs, text blocks, markdown content	Renders `<p>No description provided.</p>`.	Body `<section>`.
`name="actions"`	`<button>` elements, interactive links	Collapses the action bar container (`display: none`).	Toolbar landmark `role="toolbar"`.

Design System Theme Tokens (CSS Custom Properties)

:host {
  --card-bg: #1e293b;
  --card-border: #334155;
  --card-radius: 12px;
  --card-accent: #38bdf8;
  --card-text: #f8fafc;
  --card-subtext: #94a3b8;
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 66–70 (static template = (() => { ... })()): Implements static template compilation. The component's HTML blueprint is parsed only once across all instances.
Line 183 (this.actionsSlot.addEventListener('slotchange', ...)): Tracks dynamic mutations to the actions slot.
Line 192–198 (syncActionsVisibility()): If the consumer does not provide any action elements, the footer wrapper is automatically hidden (display: none), maintaining clean layout margins.
Line 124–129 (::slotted([slot="media"])): Forces any projected <img> or <video> to fill the 16:9 aspect-ratio media container perfectly.

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>Enterprise Media Card Component</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #0f172a; color: #f8fafc; padding: 2rem; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2rem; max-width: 1100px; margin-top: 1.5rem; }
    .custom-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #38bdf8; }
    .btn { padding: 0.5rem 1rem; border-radius: 6px; border: none; font-weight: 600; cursor: pointer; }
    .btn-primary { background: #38bdf8; color: #0f172a; }
    .btn-outline { background: transparent; color: #cbd5e1; border: 1px solid #475569; }
    .btn-outline:hover { background: #334155; }
  </style>
</head>
<body>

<h1>Enterprise Design System: <code>&lt;media-card&gt;</code></h1>

<div class="grid">
    
    <media-card>
      <img slot="avatar" class="custom-avatar" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=120" alt="Sarah Connor">
      
      <div slot="header">
        <h3 style="margin:0; font-size:1.1rem; color:#f8fafc;">Sarah Connor</h3>
        <span style="font-size:0.8rem; color:#94a3b8;">Staff Infrastructure Engineer · 2h ago</span>
      </div>

<p>Successfully migrated our core telemetry ingestion pipeline to native Web Components and Web Workers. CPU utilization dropped by 44% across all nodes!</p>

<div slot="actions" style="display:flex; gap:0.5rem;">
        <button class="btn btn-outline">💬 Comment</button>
        <button class="btn btn-primary">🚀 Repost</button>
      </div>
    </media-card>

<media-card>
      <div slot="header">
        <h3 style="margin:0; font-size:1.1rem; color:#f8fafc;">Global Cloud Summit</h3>
        <span style="font-size:0.8rem; color:#94a3b8;">Keynote Announcement</span>
      </div>

<p>Join over 50,000 developers worldwide for our upcoming technical keynote streaming live from San Francisco.</p>

<div slot="actions">
        <button class="btn btn-primary" style="width:100%;">Register Free Pass</button>
      </div>
    </media-card>

<media-card></media-card>
  </div>

/* 1. HEADER SECTION */
            .card-header {
              display: flex;
              align-items: center;
              gap: 0.85rem;
              padding: 1rem 1.25rem;
              border-bottom: 1px solid var(--card-border, #334155);
            }
            .avatar-slot-container {
              flex-shrink: 0;
            }
            .fallback-avatar {
              width: 44px;
              height: 44px;
              border-radius: 50%;
              background: #334155;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #94a3b8;
              font-weight: bold;
            }
            .fallback-header-title {
              margin: 0;
              font-size: 1.1rem;
              color: #f8fafc;
            }
            .header-content {
              flex: 1;
            }

/* 2. MEDIA SECTION */
            .card-media {
              position: relative;
              width: 100%;
              aspect-ratio: 16 / 9;
              background: #0f172a;
              overflow: hidden;
            }
            .fallback-media {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              color: #64748b;
              gap: 0.5rem;
            }
            .fallback-media svg {
              width: 48px;
              height: 48px;
              fill: currentColor;
            }

/* Slotted media elements expand to fill frame */
            ::slotted([slot="media"]) {
              width: 100% !important;
              height: 100% !important;
              object-fit: cover;
              display: block;
            }

/* 3. BODY SECTION */
            .card-body {
              padding: 1.25rem;
              color: #cbd5e1;
              font-size: 0.95rem;
              line-height: 1.6;
              flex: 1;
            }
            ::slotted(p) {
              margin: 0 0 0.75rem 0;
            }
            ::slotted(p:last-child) {
              margin-bottom: 0;
            }
            .fallback-body {
              color: #64748b;
              font-style: italic;
              margin: 0;
            }

/* 4. ACTIONS SECTION */
            .card-actions {
              padding: 0.85rem 1.25rem;
              background: #0f172a60;
              border-top: 1px solid var(--card-border, #334155);
            }
            .card-actions.hidden {
              display: none;
            }
          </style>

<article class="card-article" role="article">
            
            <header class="card-header">
              <div class="avatar-slot-container">
                <slot name="avatar">
                  <div class="fallback-avatar" aria-hidden="true">🏷️</div>
                </slot>
              </div>
              <div class="header-content">
                <slot name="header">
                  <h3 class="fallback-header-title">Untitled Entry</h3>
                </slot>
              </div>
            </header>

<figure class="card-media">
              <slot name="media">
                <div class="fallback-media">
                  <svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
                  <span>No media attached</span>
                </div>
              </slot>
            </figure>

<section class="card-body">
              <slot>
                <p class="fallback-body">No description or content provided for this entry.</p>
              </slot>
            </section>

<footer class="card-actions" id="actions-wrapper">
              <slot name="actions"></slot>
            </footer>
          </article>
        `;
        return tpl;
      })();

constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        // Stamp static pre-parsed template
        this.shadowRoot.appendChild(MediaCard.template.content.cloneNode(true));

this.actionsWrapper = this.shadowRoot.getElementById('actions-wrapper');
        this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]');

// Dynamic slotchange listener to hide action bar if no actions provided
        this.actionsSlot.addEventListener('slotchange', () => this.syncActionsVisibility());
      }

connectedCallback() {
        this.syncActionsVisibility();
      }

syncActionsVisibility() {
        const assigned = this.actionsSlot.assignedElements();
        if (assigned.length === 0) {
          this.actionsWrapper.classList.add('hidden');
        } else {
          this.actionsWrapper.classList.remove('hidden');
        }
      }
    }

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

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+---------------------------------------------------------------+
| (O) Sarah Connor                                              |
|     Staff Infrastructure Engineer · 2h ago                    |
+---------------------------------------------------------------+
| [ =================== Microchip Photo ===================== ] |
| [ ======================= (16:9) ========================== ] |
+---------------------------------------------------------------+
| Successfully migrated our core telemetry ingestion pipeline   |
| to native Web Components and Web Workers...                   |
+---------------------------------------------------------------+
| [ 💬 Comment ]                                  [ 🚀 Repost ] |
+---------------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Extend `<media-card>` with Interactive Like Counter

Instructions:

Use the <media-card> architecture from this lesson.
In the Light DOM action slot, inject an interactive <button slot="actions" class="like-btn">❤️ <span class="like-count">0</span> Likes</button>.
Add a click event handler to the button that increments the like counter and dispatches a custom composed event 'card-liked' with the new total.
Listen for 'card-liked' on the document to demonstrate event traversal across shadow DOM boundaries.

🏁 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>Media Card Challenge</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #0f172a; color: #f8fafc; padding: 2rem; }
    .like-btn {
      background: #e11d4820; color: #fb7185; border: 1px solid #e11d48;
      padding: 0.5rem 1rem; border-radius: 6px; font-weight: 700; cursor: pointer;
      display: inline-flex; align-items: center; gap: 0.5rem;
    }
    .like-btn:hover { background: #e11d4840; }
    #toast {
      position: fixed; bottom: 2rem; right: 2rem; background: #10b981;
      color: #0f172a; padding: 0.75rem 1.25rem; border-radius: 8px;
      font-weight: bold; display: none;
    }
  </style>
</head>
<body>
  <h1>Interactive Media Card Challenge</h1>

  <media-card id="article-card" style="max-width: 480px; display: block;">
    <span slot="avatar" style="font-size: 1.5rem;">🛰️</span>
    <h3 slot="header" style="margin:0; color:#38bdf8;">Deep Space Telemetry Release</h3>
    <p>James Webb Space Telescope captures unprecedented spectroscopic signatures from galaxy cluster MACS0647-JD.</p>
    
    <div slot="actions">
      <button class="like-btn" id="like-btn">
        ❤️ <span id="counter">0</span> Likes
      </button>
    </div>
  </media-card>

  <div id="toast"></div>

  <script>
    // Include MediaCard custom element definition
    class MediaCard extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
          <style>
            :host { display: block; background: #1e293b; border: 1px solid #334155; border-radius: 12px; overflow: hidden; }
            .header { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid #334155; }
            .body { padding: 1.25rem; color: #cbd5e1; line-height: 1.5; }
            .footer { padding: 0.75rem 1rem; border-top: 1px solid #334155; background: #0f172a50; }
          </style>
          <div class="header">
            <slot name="avatar"></slot>
            <slot name="header"></slot>
          </div>
          <div class="body"><slot></slot></div>
          <div class="footer"><slot name="actions"></slot></div>
        `;
      }
    }
    customElements.define('media-card', MediaCard);

    // Interactive Like Counter Wiring
    let likes = 0;
    const likeBtn = document.getElementById('like-btn');
    const counter = document.getElementById('counter');
    const toast = document.getElementById('toast');

    likeBtn.addEventListener('click', () => {
      likes++;
      counter.textContent = likes;

      // Dispatch composed event
      likeBtn.dispatchEvent(new CustomEvent('card-liked', {
        bubbles: true,
        composed: true,
        detail: { totalLikes: likes }
      }));
    });

    // Global document listener catching the composed event
    document.addEventListener('card-liked', (e) => {
      toast.textContent = `🚀 Broadcast received! Total card likes: ${e.detail.totalLikes}`;
      toast.style.display = 'block';
      setTimeout(() => toast.style.display = 'none', 2500);
    });
  </script>
</body>
</html>

Why this works:

The interactive <button> is declared in the Light DOM and projected into slot="actions".
The CustomEvent('card-liked', { bubbles: true, composed: true }) cleanly propagates up through the Shadow DOM hierarchy to the document root.

⚠️ Common Pitfalls

Hardcoding Slot Heights Without Aspect Ratios: Fixing media slot heights to height: 200px causes distortion on mobile screens. Always use modern CSS aspect-ratio: 16 / 9; on the slot wrapper.
Forgetting Fallback Dimensions: If an SVG fallback inside <slot name="media"> has no explicit width, height, or viewBox, it may collapse to 0 pixels in some browser rendering engines.
Unnecessary Wrapper <div> Bloat in Consumer Markup: Consumers do not need to wrap every text element in a <div> to slot it; simple <h3 slot="header"> or <button slot="actions"> tags slot directly.

💡 Pro Tips

CSS Part Exposure (::part): In addition to slots, expose structural styling hooks using part="header", part="media", and part="footer" on internal shadow wrappers so design system consumers can customize padding and background styles seamlessly.
Constructable Stylesheets Integration: In production enterprise libraries, combine <template> stamping with shadowRoot.adoptedStyleSheets = [sharedSheet] to share CSS rule caches across thousands of <media-card> instances.

📌 Key Takeaways

Multi-slot composition enables complex enterprise components with clean, declarative consumer APIs.
Declarative fallback content allows components to render beautifully even when optional slots are omitted.
Use slotchange to dynamically synchronize container visibility when optional toolbars are empty.
::slotted([slot="media"]) ensures projected media elements automatically conform to component layout rules.
Static template compilation maximizes memory reuse and delivers near-instantaneous component instantiation.
--

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

? Question 1 / 3

Why is compiling the master `<template>` as a static class property (`static template = ...`) a recommended architectural pattern for Web Components?

Topic: HTML Fundamentals

? Question 2 / 3

How can a `<media-card>` automatically hide its footer action bar container when the consumer provides no elements matching `slot="actions"`?

Topic: HTML Fundamentals

? Question 3 / 3

Which CSS selector inside the component's Shadow DOM ensures that any image projected into `slot="media"` fills the 16:9 container without distortion?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The Enterprise Component Architecture

Slot Contract & Fallback Specifications

Design System Theme Tokens (CSS Custom Properties)

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Extend <media-card> with Interactive Like Counter

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Why is compiling the master <template> as a static class property (static template = ...) a recommended architectural pattern for Web Components?

How can a <media-card> automatically hide its footer action bar container when the consumer provides no elements matching slot="actions"?

Which CSS selector inside the component's Shadow DOM ensures that any image projected into slot="media" fills the 16:9 container without distortion?

🎯 The Challenge: Extend `<media-card>` with Interactive Like Counter

Why is compiling the master `<template>` as a static class property (`static template = ...`) a recommended architectural pattern for Web Components?

How can a `<media-card>` automatically hide its footer action bar container when the consumer provides no elements matching `slot="actions"`?

Which CSS selector inside the component's Shadow DOM ensures that any image projected into `slot="media"` fills the 16:9 container without distortion?