HTML - Template Element (Scripted HTML Fragment)


The template element is an HTML element that supports templating.

It creates:

A template fragment is not rendered, but stored until it is instantiated via JavaScript

When use in conjunction with a custom element and the shadow dom, the code created is called a web component.



Template without placeholder

  • Template
<template id="template-id">
    p {
      color: white;
      background-color: #666;
      padding: 5px;
  <p>A template that appears only if Javascript add it to the page</p>
  • Javascript will add the template content
let template = document.getElementById('template-id');
let templateContent = template.content;
// the second append has no effect
  • Result:


Example from the specification 1)

  • The template.
<template id="template"><p>Smile!</p></template>

The p element is not a child of the template in the DOM; it is a child of the DocumentFragment returned by the template element's content IDL attribute.

  • The javascript.
   let num = 3;
   const fragment = document.getElementById('template').content.cloneNode(true);
   while (num-- > 1) {
     fragment.firstChild.textContent += fragment.lastChild.textContent;
  • The result:


See HTML Slot - A step by step on how to create a Template Placeholder

Documentation / Reference

Discover More
DOM - Document Fragment

The DocumentFragment is a minimal document object that has no parent. Example: * HTML template * Svg document
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
HTML - (Client-side) Script (Element)

A client-side script is a program that is: linked (server-side script) or directly embedded in an HTML document (in-line script) Scripts in HTML have “run-to-completion” semantics, meaning that...
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
HTML - Custom Tag / Element

A [[|frontmatter]] description shown on the Search Engine Result Pages
HTML - Empty Element (Placeholder, )

An element can be empty legitimately For example when: it is used as a placeholder which will later be filled in by a script, the element is part of a template and would on most pages be filled...
HTML - Metadata Content

Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other “out of...
HTML - Phrasing Content (Text)

Phrasing content is: the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs. Most elements that are categorized...
HTML Slot - A step by step on how to create a Template Placeholder

Slots allows to define placeholders in an HTML template TemplateShadow DOMcustom elementweb components Status Description Slotable The element that should be inserted in a slot Sloted The element...

Share this page:
Follow us:
Task Runner