<template> / <slot>

The template element defines a reusable HTML blueprint that is not rendered by the browser. The slot element is used in Web Components to define insertion points where external content can be injected inside a custom element.

Syntax

<!-- template: an HTML blueprint that is not rendered -->
<template id="card-template">
  <div class="card">
    <h2 class="card-title"></h2>
    <p class="card-body"></p>
  </div>
</template>

<!-- slot: insertion point for Web Components (used inside Shadow DOM) -->
<template id="my-card-template">
  <style>
    .card { border: 1px solid #ccc; padding: 16px; }
  </style>
  <div class="card">
    <!-- unnamed slot (default slot) -->
    <slot></slot>
    <!-- named slot -->
    <slot name="footer"></slot>
  </div>
</template>

Attributes / Properties

Attribute / Property	Description
template#content	A property that provides access to the contents of a template element. Returns the content as a `DocumentFragment`.
cloneNode(true)	A method that duplicates the template's content. Passing `true` performs a deep copy, including all child elements.
slot (attribute)	An attribute placed on a child element of a custom element. Specifies by name which slot the element should be inserted into.
slot name	The name assigned to a `slot` element inside a Shadow DOM. The matching child element of the custom element is inserted into this slot.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 16px;
      margin: 8px;
      max-width: 300px;
    }
    .card-title { font-weight: bold; font-size: 1.1em; margin: 0 0 8px; }
    .card-body  { color: #555; margin: 0; }
  </style>
</head>
<body>

  <!-- template element: not rendered by the browser -->
  <template id="card-template">
    <div class="card">
      <p class="card-title"></p>
      <p class="card-body"></p>
    </div>
  </template>

  <div id="container"></div>

  <script>
    // Card data
    const cards = [
      { title: 'HTML',       body: 'The language for structuring web pages.' },
      { title: 'CSS',        body: 'Handles the visual design of web pages.' },
      { title: 'JavaScript', body: 'Adds interactivity to web pages.' },
    ];

    const template = document.getElementById('card-template');
    const container = document.getElementById('container');

    cards.forEach(({ title, body }) => {
      // Clone the template and fill in the data
      const clone = template.content.cloneNode(true);
      clone.querySelector('.card-title').textContent = title;
      clone.querySelector('.card-body').textContent  = body;
      container.appendChild(clone);
    });
  </script>

</body>
</html>

Result

When the page loads, JavaScript clones the template three times and renders three cards — HTML, CSS, and JavaScript — stacked vertically. The template element itself is present in the HTML source but never appears on screen.

<!-- Generated DOM (conceptual) -->
<div id="container">
  <div class="card">
    <p class="card-title">HTML</p>
    <p class="card-body">The language for structuring web pages.</p>
  </div>
  <div class="card">
    <p class="card-title">CSS</p>
    <p class="card-body">Handles the visual design of web pages.</p>
  </div>
  <div class="card">
    <p class="card-title">JavaScript</p>
    <p class="card-body">Adds interactivity to web pages.</p>
  </div>
</div>

Overview

The template element is an HTML blueprint that is not rendered, styled, or scripted when the page loads. It only becomes visible after JavaScript clones it with cloneNode and appends it to the DOM. This approach is safer and more efficient than generating HTML from strings with innerHTML when you need to create the same structure repeatedly (such as lists, cards, or table rows). Passing user-supplied strings to innerHTML risks XSS, but setting values via cloneNode + textContent with a template element is XSS-safe.

The slot element is part of the Web Components specification (custom elements + Shadow DOM). It defines a "hole" into which users of a custom element can inject content from outside. An unnamed slot (the default slot) accepts all child elements of the custom element, while a named slot — identified by a name attribute — accepts only the specific child elements that carry a matching slot="name" attribute.

Web Components is a browser-native specification for building self-contained, encapsulated UI components with HTML and JavaScript — no framework required. While the Shadow DOM specification can be complex, a good starting point is the simpler use of the template element for reusable HTML blueprints. See also script / noscript for related elements.