Templates & Web Components

The <template> element holds HTML that isn't rendered until a script copies it into the page — ideal for repeated items like cards or table rows. Combined with custom elements and the shadow DOM, templates let you create your own reusable HTML tags: web components.

The template element

<template id="card-template">
  <article class="card">
    <h3 class="title">Product name</h3>
    <p class="price">Price</p>
  </article>
</template>

<div id="cards"></div>

<script>
  const products = [
    { title: "Desk lamp", price: "€39" },
    { title: "Notebook", price: "€7" },
    { title: "Fountain pen", price: "€24" },
  ];
  const template = document.getElementById("card-template");
  for (const p of products) {
    const card = template.content.cloneNode(true);
    card.querySelector(".title").textContent = p.title;
    card.querySelector(".price").textContent = p.price;
    document.getElementById("cards").append(card);
  }
</script>

Result

Content inside <template> is parsed but inert: it isn't shown, images don't load and scripts don't run. A script clones template.content, fills in the data with textContent (safe from injection) and adds it to the page. The structure stays in HTML, where it's easy to read and edit.

Custom elements

You can define your own HTML elements. Their names must contain a hyphen, to avoid clashing with future built-in elements:

<greeting-badge name="Ana"></greeting-badge>
<greeting-badge name="Ben"></greeting-badge>

<script>
  class GreetingBadge extends HTMLElement {
    connectedCallback() {
      const name = this.getAttribute("name") || "friend";
      this.textContent = `👋 Hello, ${name}!`;
      this.style.cssText = "display:inline-block;padding:4px 10px;margin:4px;border-radius:12px;background:#fbe4ec";
    }
  }
  customElements.define("greeting-badge", GreetingBadge);
</script>

Result

customElements.define registers the class. connectedCallback runs whenever an instance is added to the page. From then on, <greeting-badge> works like any other tag — in HTML, in JavaScript, and in any framework.

Shadow DOM: encapsulated styles

A component can have its own private DOM tree — a shadow root — whose styles don't leak out, and page styles don't leak in:

<style>
  p { color: red; }
</style>
<p>Page paragraphs are red.</p>
<info-card heading="Encapsulated">This paragraph inside the component is not red.</info-card>

<script>
  class InfoCard extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: "open" });
      shadow.innerHTML = `
        <style>
          .box { border: 2px solid #1a5fb4; border-radius: 8px; padding: 8px 12px; font-family: sans-serif; }
          h4 { margin: 0 0 4px; color: #1a5fb4; }
          p { margin: 0; }
        </style>
        <div class="box">
          <h4></h4>
          <p><slot></slot></p>
        </div>`;
      shadow.querySelector("h4").textContent = this.getAttribute("heading");
    }
  }
  customElements.define("info-card", InfoCard);
</script>

Result

The <slot> element marks where the component's children (the light DOM) appear inside its shadow DOM. Named slots (<slot name="footer"> paired with slot="footer" on a child) allow several insertion points.

Declarative shadow DOM

A shadow root can also be written directly in HTML, so components can be rendered on the server without JavaScript:

When to use web components

Design systems shared across teams using different frameworks — a <company-button> works in React, Vue and plain HTML alike.
Embeddable widgets — maps, players and chat boxes that must not be affected by the host page's CSS.
Progressive enhancement — wrapping ordinary HTML in a custom element that adds behaviour once the script loads.

Libraries such as Lit reduce the boilerplate of writing components. For a full single-page application, frameworks like React, Vue and Angular remain more common.

Accessibility reminders

Custom elements start with no built-in semantics — a <fancy-button> isn't a button to assistive technology. Either put real elements (like <button>) inside the component, or provide roles, keyboard handling and focus management yourself.

Try it yourself

<template id="row">
  <tr><td class="name"></td><td class="score"></td></tr>
</template>
<table>
  <thead><tr><th scope="col">Player</th><th scope="col">Score</th></tr></thead>
  <tbody id="board"></tbody>
</table>
<script>
  const scores = [["Mia", 340], ["Leo", 295], ["Ava", 410]].sort((a, b) => b[1] - a[1]);
  const row = document.getElementById("row");
  for (const [name, score] of scores) {
    const tr = row.content.cloneNode(true);
    tr.querySelector(".name").textContent = name;
    tr.querySelector(".score").textContent = score;
    document.getElementById("board").append(tr);
  }
</script>

Result

PreviousDetails & Summary NextCanvas & SVG