HTML - Template Element (Scripted HTML Fragment)

About

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.

Example

Basic

Template without placeholder

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

Loop

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.before(fragment.firstChild.cloneNode(true));
     fragment.firstChild.textContent += fragment.lastChild.textContent;
   }
   document.body.appendChild(fragment);
  • The result:

Slot

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 - (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 [[https://combostrap.com/frontmatter|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...
Web - Component

A Web Component is HTML Custom Element that is optionally: created in Shadow DOM (to scope the DOM) using a HTML Templates This is a technology that permits to package up styling and functionality...



Share this page:
Follow us:
Task Runner