Purpose and content model
Template holds markup that is parsed but not rendered as ordinary page content until the application instantiates it. Its contents live in a separate DocumentFragment accessible through the content property. Cloning that fragment is useful for repeated cards, rows, or component structures while keeping a readable HTML source.
Slot is a distribution point inside a shadow tree. It can display matching light-DOM children or fallback content. A slot in an ordinary document does not create a shadow component by itself. Template and slot are building blocks; they do not automatically provide a framework, state management, or accessibility architecture.
Syntax and working example
<template id="book-card">
<article><h2 class="book-title"></h2><p class="book-summary"></p></article>
</template>
<div id="books"></div>
<script>
const card = document.querySelector("#book-card").content.cloneNode(true);
card.querySelector(".book-title").textContent = "Urban gardens";
card.querySelector(".book-summary").textContent = "Growing food in small spaces.";
document.querySelector("#books").append(card);
</script>Supported attributes and behavior
Template uses globals and supports declarative shadow-root attributes such as shadowrootmode, shadowrootdelegatesfocus, shadowrootclonable, and shadowrootserializable under their defined conditions. Support differs, so verify the exact feature. Slot uses name for named distribution. An assigned light-DOM child uses its global slot attribute to identify the destination. A default slot has no name. Duplicate IDs in cloned content still need attention.
Another practical pattern
<reading-card>
<template shadowrootmode="open"><article><slot name="title"></slot><slot></slot></article></template>
<h2 slot="title">Urban gardens</h2><p>A guide to small spaces.</p>
</reading-card>Accessibility and browser notes
Shadow boundaries change styling and some relationship behavior, but do not excuse inaccessible components. Keep meaningful headings, native controls, labels, and focus behavior in the final composed interface. Test slots with both assigned and fallback content and check that the reading order matches the visual order.
Common mistakes
Do not query template descendants as though they were normal rendered children; use template.content. Cloning a node does not reproduce every JavaScript event listener attached through addEventListener. Never populate a cloned template with untrusted innerHTML when plain text is intended.
Verify your implementation
Instantiate several copies and check for duplicate IDs and broken label references. Disable or remove the assigned slot content to inspect the fallback. Test the final composed tree with keyboard navigation and assistive technology, not only the isolated template source.
Standard status and sources
Standard; browser availability must be checked independently of specification status.