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
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

custom is the possibility create custom element shadow DOMtemplates elementweb components HTML count word analytics element. An HTML text area to change the number of words. The HTML with a...
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...
What is a 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...
What is an HTML Fragment ?

A fragment in HTML is a piece of HTML that is intended to be added dynamically into an web page. Via insertAdjacentHTML) The fragment (You could have get it from an AJAX call) Adding it in the...
What is the script HTML 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...



Share this page:
Follow us:
Task Runner