files/en-us/web/html/reference/elements/template/index.md
The <template> HTML element serves as a mechanism for holding {{Glossary("HTML")}} fragments, which can either be used later via JavaScript or generated immediately into shadow DOM.
This element includes the global attributes.
shadowrootmode
: Creates a shadow root for the parent element. It is a declarative version of the {{domxref("Element.attachShadow()")}} method and accepts the same {{glossary("enumerated")}} values.
open
closed
[!NOTE] The HTML parser creates a {{domxref("ShadowRoot")}} object in the DOM for the first
<template>in a node with this attribute set to an allowed value. If the attribute is not set, or not set to an allowed value — or if aShadowRoothas already been declaratively created in the same parent — then an {{domxref("HTMLTemplateElement")}} is constructed. A {{domxref("HTMLTemplateElement")}} cannot subsequently be changed into a shadow root after parsing, for example, by setting {{domxref("HTMLTemplateElement.shadowRootMode")}}.
[!NOTE] You may find the non-standard
shadowrootattribute in older tutorials and examples that used to be supported in Chrome 90-110. This attribute has since been removed and replaced by the standardshadowrootmodeattribute.
shadowrootclonable
clonable property of a ShadowRoot created using this element to true.
If set, a clone of the shadow host (the parent element of this <template>) created with {{domxref("Node.cloneNode()")}} or {{domxref("Document.importNode()")}} will include a shadow root in the copy.shadowrootcustomelementregistry
customElementRegistry property of a ShadowRoot created using this element to null, rather than the document's custom element registry.
This allows a scoped {{domxref("CustomElementRegistry")}} to be attached later using {{domxref("CustomElementRegistry.initialize()")}}.shadowrootdelegatesfocus
delegatesFocus property of a ShadowRoot created using this element to true.
If this is set and a non-focusable element in the shadow tree is selected, then focus is delegated to the first focusable element in the tree.
The value defaults to false.shadowrootreferencetarget {{Experimental_Inline}} {{non-standard_inline}}
referenceTarget property of a ShadowRoot created using this element. The value should be the ID of an element inside the shadow DOM. If set, target references to the host element from outside the shadow DOM will cause the referenced target element to become the effective target of the reference to the host element.shadowrootserializable
serializable property of a ShadowRoot created using this element to true.
If set, the shadow root may be serialized by calling the {{DOMxRef('Element.getHTML()')}} or {{DOMxRef('ShadowRoot.getHTML()')}} methods with the options.serializableShadowRoots parameter set true.
The value defaults to false.This element has no permitted content, because everything nested inside it in the HTML source does not actually become the children of the <template> element. The {{domxref("Node.childNodes")}} property of the <template> element is always empty, and you can only access said nested content via the special {{domxref("HTMLTemplateElement.content", "content")}} property. However, if you call {{domxref("Node.appendChild()")}} or similar methods on the <template> element, then you would be inserting children into the <template> element itself, which is a violation of its content model and does not actually update the {{domxref("DocumentFragment")}} returned by the content property.
Due to the way the <template> element is parsed, all <html>, <head>, and <body> opening and closing tags inside the template are syntax errors and are ignored by the parser, so <template><head><title>Test</title></head></template> is the same as <template><title>Test</title></template>.
There are two main ways to use the <template> element.
By default, the element's content is not rendered.
The corresponding {{domxref("HTMLTemplateElement")}} interface includes a standard {{domxref("HTMLTemplateElement.content", "content")}} property (without an equivalent content/markup attribute). This content property is read-only and holds a {{domxref("DocumentFragment")}} that contains the DOM subtree represented by the template.
The {{domxref("Node.cloneNode()")}} and {{domxref("Document.importNode()")}} methods both create a copy of a node. The difference is that importNode() clones the node in the context of the calling document, whereas cloneNode() uses the document of the node being cloned. The document context determines the {{domxref("CustomElementRegistry")}} for constructing any custom elements. For this reason, use document.importNode() to clone the content fragment so that custom element descendants are constructed using the definitions in the current document, rather than the separate document that owns the template content. See the {{domxref("Node.cloneNode()")}} page's examples for more details.
Note that the DocumentFragment container itself should not have data attached to it. See the Data on the DocumentFragment is not cloned example for more details.
If the <template> element contains the shadowrootmode attribute with a value of either open or closed, the HTML parser will immediately generate a shadow DOM. The element is replaced in the DOM by its content wrapped in a {{domxref("ShadowRoot")}}, which is attached to the parent element.
This is the declarative equivalent of calling {{domxref("Element.attachShadow()")}} to attach a shadow root to an element.
If the element has any other value for shadowrootmode, or does not have the shadowrootmode attribute, the parser generates a {{domxref("HTMLTemplateElement")}}.
Similarly, if there are multiple declarative shadow roots, only the first one is replaced by a {{domxref("ShadowRoot")}} — subsequent instances are parsed as {{domxref("HTMLTemplateElement")}} objects.
First we start with the HTML portion of the example.
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
First, we have a table into which we will later insert content using JavaScript code. Then comes the template, which describes the structure of an HTML fragment representing a single table row.
Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis.
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ("content" in document.createElement("template")) {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector("tbody");
const template = document.querySelector("#productrow");
// Clone the new row and insert it into the table
const clone = document.importNode(template.content, true);
let td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild(clone);
// Clone the new row and insert it into the table
const clone2 = document.importNode(template.content, true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild(clone2);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
The result is the original HTML table, with two new rows appended to it via JavaScript:
table {
background: black;
}
table td {
background: white;
}
{{EmbedLiveSample("Generating table rows", 500, 120)}}
In this example, a hidden support warning is included at the beginning of the markup. This warning is later set to be displayed via JavaScript if the browser doesn't support the shadowrootmode attribute. Next, there are two {{HTMLElement("article")}} elements, each containing nested {{HTMLElement("style")}} elements with different behaviors. The first <style> element is global to the whole document. The second one is scoped to the shadow root generated in place of the <template> element because of the presence of the shadowrootmode attribute.
<p hidden>
⛔ Your browser doesn't support <code>shadowrootmode</code> attribute yet.
</p>
<article>
<style>
p {
padding: 8px;
background-color: wheat;
}
</style>
<p>I'm in the DOM.</p>
</article>
<article>
<template shadowrootmode="open">
<style>
p {
padding: 8px;
background-color: plum;
}
</style>
<p>I'm in the shadow DOM.</p>
</template>
</article>
const isShadowRootModeSupported = Object.hasOwn(
HTMLTemplateElement.prototype,
"shadowRootMode",
);
document
.querySelector("p[hidden]")
.toggleAttribute("hidden", isShadowRootModeSupported);
{{EmbedGHLiveSample("dom-examples/shadow-dom/shadowrootmode/scoping.html", "", "120")}}
This example demonstrates how shadowrootdelegatesfocus is applied to a shadow root that is created declaratively, and the effect this has on focus.
The code first declares a shadow root inside a <div> element, using the <template> element with the shadowrootmode attribute.
This displays both a non-focusable <div> containing text and a focusable <input> element.
It also uses CSS to style elements with {{cssxref(":focus")}} to blue, and to set the normal styling of the host element.
<div>
<template shadowrootmode="open">
<style>
:host {
display: block;
border: 1px dotted black;
padding: 10px;
margin: 10px;
}
:focus {
outline: 2px solid blue;
}
</style>
<div>Clickable Shadow DOM text</div>
<input type="text" placeholder="Input inside Shadow DOM" />
</template>
</div>
The second code block is identical except that it sets the shadowrootdelegatesfocus attribute, which delegates focus to the first focusable element in the tree if a non-focusable element in the tree is selected.
<div>
<template shadowrootmode="open" shadowrootdelegatesfocus>
<style>
:host {
display: block;
border: 1px dotted black;
padding: 10px;
margin: 10px;
}
:focus {
outline: 2px solid blue;
}
</style>
<div>Clickable Shadow DOM text</div>
<input type="text" placeholder="Input inside Shadow DOM" />
</template>
</div>
Last of all we use the following CSS to apply a red border to the parent <div> element when it has focus.
div:focus {
border: 2px solid red;
}
The results are shown below.
When the HTML is first rendered, the elements have no styling, as shown in the first image.
For the shadow root that does not have shadowrootdelegatesfocus set you can click anywhere except the <input> and the focus does not change (if you select the <input> element it will look like the second image).
For the shadow root with shadowrootdelegatesfocus set, clicking on the text (which is non-focusable) selects the <input> element, as this is the first focusable element in the tree.
This also focuses the parent element as shown below.
When a {{domxref("DocumentFragment")}} value is passed, {{domxref("Node.appendChild")}} and similar methods move only the child nodes of that value into the target node. Therefore, it is usually preferable to attach event handlers to the children of a DocumentFragment, rather than to the DocumentFragment itself.
Consider the following HTML and JavaScript:
<div id="container"></div>
<template id="template">
<div>Click me</div>
</template>
const container = document.getElementById("container");
const template = document.getElementById("template");
function clickHandler(event) {
event.target.append(" — Clicked this div");
}
const firstClone = document.importNode(template.content, true);
firstClone.addEventListener("click", clickHandler);
container.appendChild(firstClone);
const secondClone = document.importNode(template.content, true);
secondClone.children[0].addEventListener("click", clickHandler);
container.appendChild(secondClone);
Since firstClone is a DocumentFragment, only its children are added to container when appendChild is called; the event handlers of firstClone are not copied. In contrast, because an event handler is added to the first child node of secondClone, the event handler is copied when appendChild is called, and clicking on it works as one would expect.
{{EmbedLiveSample(' Data on the DocumentFragment is not cloned')}}
{{Specifications}}
{{Compat}}
part and exportparts HTML attributesShadowRoot interface