CodeBlanks Logo Icon CodeBlanks
Login Register

Template and slot

HTML course · Advanced · Lesson 50/56

Write a reusable partial with <template> and <slot>.

Define a skeleton with <template>

The <template> element holds an HTML skeleton that isn't shown on the page. Its content isn't rendered; we clone it with JavaScript and insert it.

This lets us write a widget skeleton once and reuse it many times. For example, instead of building separate widgets for each region, we define one <template>.

Inside a template we write normal HTML; <article>, <header> and similar tags can appear.

A content slot with <slot>

A <slot> is a placeholder inside a template. When the template is cloned, external content is injected here.

We give the slot a name attribute; for example <slot name="content">. If no content is provided, the fallback we write inside the slot is shown.

Example: <slot name="content"><p>Waiting for data</p></slot> — shows 'Waiting for data' until content arrives.

Exercise Add a template and a slot to the body

Take the widget from the previous lesson. After </section>, before </body>, add a <template>.

Give the template an id="widget-template" attribute. Inside it place an <article>; inside that add a <header> with an <h2> (content: New Sales Dashboard). After the header add <slot name="content"> and inside it put a fallback <p>Waiting for data</p>.

Show example solution 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sales Dashboard</title>
  </head>
  <body>
    <section>
      <header>
        <h1>Sales Dashboard</h1>
      </header>
      <main>
        <article>
          <figure>
            <figcaption>Monthly revenue</figcaption>
            <p>$12,450</p>
          </figure>
          <table>
            <thead>
              <tr>
                <th>Product</th>
                <th>Sales</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Cotton t-shirt</td>
                <td>320</td>
              </tr>
              <tr>
                <td>Linen trousers</td>
                <td>184</td>
              </tr>
            </tbody>
          </table>
        </article>
      </main>
    </section>
    <template id="widget-template">
      <article>
        <header>
          <h2>New Sales Dashboard</h2>
        </header>
        <slot name="content">
          <p>Waiting for data</p>
        </slot>
      </article>
    </template>
  </body>
</html>

Test yourself

  1. What's the key property of the <template> element?

    • Renders its content immediately
    • Hides content when the page loads
    • Defines only CSS styles
    • Content is written once, cloned later; not rendered directly
    Show answer

    Content is written once, cloned later; not rendered directly — Correct! template content is not rendered; it's cloned and inserted later.

  2. Complete the slot name

    <slot name="____">
  <p>Waiting for data</p>
</slot>
    Show answer 
    <slot name="content">
  <p>Waiting for data</p>
</slot>

  3. Match the template concepts

    template
    Reusable skeleton
    slot
    Content slot
    fallback
    Shown when slot empty
    article
    Independent content unit

All lessons in Advanced

1 Advanced media

  1. Lazy loading
  2. Decoding async
  3. Srcset and sizes
  4. Width/height and CLS
  5. Preload and prefetch
  6. Summary - Performance gallery

2 Picture and responsive images

  1. Picture and source
  2. Media attribute
  3. Type attribute
  4. Aspect ratio
  5. Background vs img
  6. Summary - Responsive hero

3 Project: Video player

  1. Project: Accessible video player
  2. Video skeleton
  3. Track and captions
  4. Poster and preview
  5. Project final - Video player

4 Complex forms

  1. Form autocomplete
  2. Hidden input
  3. File upload
  4. Range and color
  5. Output and form events
  6. Summary - Settings panel

5 Metadata and SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical and hreflang
  5. Title and slug strategy
  6. Summary - SEO package

6 Project: Schema.org markup

  1. Project: Schema.org markup
  2. Itemtype and itemid
  3. Itemprop
  4. Nested itemtype
  5. Project final - Structured data

7 Web components HTML

  1. Template element
  2. Slot element
  3. Custom element names
  4. Shadow DOM skeleton
  5. Declarative shadow DOM
  6. Summary - Card template

8 Templates and partials

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript and progressive
  6. Summary - Component skeleton

9 Project: Dashboard widget

  1. Project: Dashboard widget
  2. Widget skeleton
  3. Visual data structure
  4. Template and slot
  5. Project final - Widget

10 Advanced final

  1. Challenge - Responsive image
  2. Challenge - Accessible video
  3. Challenge - Complex form
  4. Challenge - SEO and structured data
  5. Challenge - Advanced capstone