HTML & CSS reference

<template>, <slot>

A markup blueprint that stays hidden until JavaScript copies it; `<slot>` is an insertion point in web components.

Syntax

<template id="card">…</template>

Attributes

Parameter	Type	Description
name	text	On `<slot>` — the name of the spot that receives content with `slot="name"`.

Examples

Cards made from a template:

<template id="drink">
  <p class="item">☕ <b></b></p>
</template>
<div id="list"></div>
 
<script>
  for (const name of ["Latte", "Mocha", "Flat white"]) {
    const copy = document.getElementById("drink").content.cloneNode(true);
    copy.querySelector("b").textContent = name;
    document.getElementById("list").append(copy);
  }
</script>

A slot in a shadow DOM:

<div id="host"><span slot="title">Hello from the page</span></div>
 
<script>
  const root = document.getElementById("host").attachShadow({ mode: "open" });
  root.innerHTML = '<div style="border: 2px solid teal; padding: 8px">Card: <slot name="title"></slot></div>';
</script>

Notes

The content of <template> is parsed but not displayed or run: images do not load, scripts do not execute. <slot> works only inside a shadow DOM — the basis of web components.

In the tutorial

Disclosure widgets and dialogs — The details and summary tags, an accordion, the dialog modal window, closing with form method=dialog and popover blocks.

Thanks for reading!