Template & Web Components in HTML
From the HTML cheat sheet · Interactive & Web Components · verified Jul 2026
Template & Web Components
Reusable HTML templates and Web Component building blocks
html
<!-- Template (not rendered until cloned) -->
<template id="card-template">
<div class="card">
<h2 class="card-title"></h2>
<p class="card-body"></p>
</div>
</template>
<script>
const template = document.getElementById('card-template');
const clone = template.content.cloneNode(true);
clone.querySelector('.card-title').textContent = 'Hello';
document.body.appendChild(clone);
</script>💡 <template> content is parsed but NOT rendered — use cloneNode to stamp out copies
⚡ Templates are perfect for list items, table rows, and any repeated HTML structures
📌 <slot> lets consumers inject content into Web Components — named slots target specific areas
🟢 Web Components (custom elements + shadow DOM + templates) work in all modern browsers
templateslotweb-components