References

Beginner-friendly references for web development, with live, editable examples.

The HTML <template> tag

Element All modern browsers Updated
Quick answer

The HTML <template> element holds inert HTML (parsed but not rendered, with scripts and images not running or loading) until you clone its .content with JavaScript. It also powers declarative shadow DOM via shadowrootmode.

Overview

The <template> element stores a chunk of markup that the browser parses but does not render. Crucially, its content is inert: images inside it do not load, scripts do not run, and form controls are not submitted. It is a dormant blueprint, not live content.

You reach its contents through the .content property, which is a DocumentFragment, and clone it with cloneNode(true) to stamp out repeated UI. That clone-and-insert pattern is the foundation of many component and templating systems: define the markup once, instantiate it as many times as you need.

It has a second, modern role too: with the shadowrootmode attribute, a <template> declares a declarative shadow root, letting a server render a web component's shadow DOM as plain HTML with no JavaScript required to attach it.

Syntax

<template id="row">
  <tr><td class="name"></td></tr>
</template>
<script>
  const node = document.getElementById('row').content.cloneNode(true);
</script>

Attributes

The <template> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
shadowrootclonable A boolean attribute: present or absent. Makes a declarative shadow root clonable.
shadowrootdelegatesfocus A boolean attribute: present or absent. Delegates focus into a declarative shadow root.
shadowrootmode open closed Declares a declarative shadow root on a template.
shadowrootserializable A boolean attribute: present or absent. Makes a declarative shadow root serializable.

Example

Live example 
<template id="t"><p>Cloned content</p></template>
<div id="out"></div>
<script>
  document.getElementById('out').append(document.getElementById('t').content.cloneNode(true));
</script>

Best practices

  • Use <template> to store reusable markup that should not render until you instantiate it.
  • Clone its .content with cloneNode(true) to stamp out repeated UI.
  • Rely on its inert nature: images and scripts inside do not load or run until cloned in.
  • Use shadowrootmode to declare a declarative shadow root for server-rendered web components.

Frequently asked questions

What is the template element for?
To hold inert HTML fragments that the browser parses but does not render, ready to be cloned with JavaScript.
How do I use a template with JavaScript?
Access its .content (a DocumentFragment) and clone it with cloneNode(true), then insert the clone into the page.
Does template content render on the page?
No. It stays inert (images do not load and scripts do not run) until you clone its content into the document.
What is a declarative shadow root?
A shadow DOM declared in HTML via <template shadowrootmode="open">, so a server can render web-component shadow DOM without JavaScript.
td textarea