An element and API that enables templating.

This specification is an experimental breakup of the HTML specification. You can see the full list on the index page and take part in the discussion in the repository.

The template element

Categories:

Metadata content.

Flow content.

Phrasing content.

Script-supporting element.

Contexts in which this element can be used:

Where metadata content is expected.

Where phrasing content is expected.

Where script-supporting elements are expected.

As a child of a colgroup element that doesn't have a span attribute.

Content model:

Either: Metadata content.

Or: Flow content.

Or: The content model of ol and ul elements.

Or: The content model of dl elements.

Or: The content model of figure elements.

Or: The content model of ruby elements.

Or: The content model of object elements.

Or: The content model of video and audio elements.

Or: The content model of table elements.

Or: The content model of colgroup elements.

Or: The content model of thead, tbody, and tfoot elements.

Or: The content model of tr elements.

Or: The content model of fieldset elements.

Or: The content model of select elements.

Or: The content model of details elements.

Or: The content model of menu elements whose type attribute is in the popup menu state.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

Allowed ARIA role attribute values:

None

Allowed ARIA State and Property Attributes:

Global aria-* attributes

DOM interface:

interface HTMLTemplateElement : HTMLElement {
  readonly attribute DocumentFragment content;
};

The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

In a rendering, the template element represents nothing.

template . content

Returns the contents of the template, which are stored in a DocumentFragment associated with a different Document so as to avoid the template contents interfering with the main Document. (For example, this avoids form controls from being submitted, scripts from executing, and so forth.)

Each template element has an associated DocumentFragment object that is its template contents. When a template element is created, the user agent must run the following steps to establish the template contents:

1. Let doc be the template element's node document's appropriate template contents owner document.

2. Create a DocumentFragment object whose node document is doc.

3. Set the template element's template contents to the newly created DocumentFragment object.

A Document doc's appropriate template contents owner document is the Document returned by the following algorithm:

1. If doc is not a Document created by this algorithm, run these substeps:

   1. If doc does not yet have an associated inert template document then run these substeps:

      1. Let new doc be a new Document (that does not have a browsing context). This is "a Document created by this algorithm" for the purposes of the step above.

      2. If doc is an HTML document, mark new doc as an HTML document also.

      3. Let doc's associated inert template document be new doc.

   2. Set doc to doc's associated inert template document.

   Each Document not created by this algorithm thus gets a single Document to act as its proxy for owning the template contents of all its template elements, so that they aren't in a browsing context and thus remain inert (e.g. scripts do not run). Meanwhile, template elements inside Document objects that are created by this algorithm just reuse the same Document owner for their contents.

2. Return doc.

When a template element's node document changes, the user agent must run the following steps:

1. Let doc be the template element's new node document's appropriate template contents owner document.

2. Adopt the template element's template contents (a DocumentFragment object) into doc.

The content IDL attribute must return the template element's template contents.

The cloning steps for a template element node being cloned to a copy copy must run the following steps:

1. If the clone children flag is not set in the calling clone algorithm, abort these steps.

2. Let copied contents be the result of cloning all the children of node's template contents, with document set to copy's template contents's node document, and with the clone children flag set.

3. Append copied contents to copy's template contents.

<!DOCTYPE html>
<title>Cat data</title>
<script>
 // Data is hard-coded here, but could come from the server
 var data = [
   { name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
   { name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
 ];
</script>
<table>
 <thead>
  <tr>
   <th>Name <th>Colour <th>Sex <th>Legs
 <tbody>
  <template id="row">
   <tr><td><td><td><td>
  </template>
</table>
<script>
 var template = document.querySelector('#row');
 for (var i = 0; i < data.length; i += 1) {
   var cat = data[i];
   var clone = template.content.cloneNode(true);
   var cells = clone.querySelectorAll('td');
   cells[0].textContent = cat.name;
   cells[1].textContent = cat.color;
   cells[2].textContent = cat.sex;
   cells[3].textContent = cat.legs;
   template.parentNode.appendChild(clone);
 }
</script>