HTML
Template and slot
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
-
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.
-
Complete the slot name
<slot name="____">
<p>Waiting for data</p>
</slot>
Show answer
<slot name="content">
<p>Waiting for data</p>
</slot>
-
Match the template concepts
- template
- Reusable skeleton
- slot
- Content slot
- fallback
- Shown when slot empty
- article
- Independent content unit
Next lesson: Project final - Widget
