Introducing HTML’s new template element

Warning This article was written over six months ago, and may contain outdated information.

You may have heard of Web Components, a suite of emerging standards that make it possible to build secure reusable widgets using web platform technologies. One of the first specs to make its way into implementation is HTML Templates, embodied by the template element, which as I write this is implemented in Chrome Canary and Firefox Nightly.

If you’ve used Mustache, Handlebars or any similar front-end templating library you’ll be quite familiar with how the template element works: you just include it in your document (it’s apparently legal inside head or body), perhaps with a unique id for easy reference, and add some markup inside it; for example:

<template id="foo">
  <h2>Hello, world!</h2>
  <hr>
</template>

The template element will be parsed by the browser but not rendered in the page; the markup inside is considered completely inert, meaning no style rules will be applied, and no assets loaded. In order to use the template markup you’ll need to activate it by placing it into the DOM using JavaScript. As an illustration let’s presume I have the above markup in my document, along with some content which will be rendered:

<div id="bar">
  <h1>The template element</h1>
</div>

What I want to do is make a copy of the markup inside the template element by using the cloneNode() method on the content property, then insert it into the DOM; I’ll do this using the appendChild() method. To achieve this, my script looks like so:

var foo = document.getElementById('foo'),
    bar = document.getElementById('bar'),
    cloned = foo.content.cloneNode(true);
bar.appendChild(cloned);

Now the h2 and hr elements will be appended to div#bar, after the h1 element; note that the markup becomes active at this point, so any relevant assets will be loaded. The resulting markup will appear like so:

<div id="bar">
  <h1>The template element</h1>
  <h2>Hello, world!</h2>
  <hr>
</div>

You can see the result for yourself in this example file:

Demo: the template element

As mentioned, this is already implemented in Chrome Canary (you’ll need to enable the experimental WebKit features flag in chrome://flags/) and Firefox Nightly, although there’s no news yet on when this will be in a release version.

This is a really simple example, but hopefully you can see how rich with potential this is; you can dynamically update the code each time you clone it, making it totally reusable. The template element is just a small part of Web Components, which I’ll be aiming to cover in more detail over the coming months.

NB: After writing this post I found the article HTML’s New Template Tag on HTML5 Rocks!, which covers the subject in a little more depth. It’s written by Eric Bidelman, who’s pretty much the authority on Web Components.

Update: I should point out that when the spec is fully implemented, templates will be shareable across multiple pages by linking to them in the document head:

<link rel="import" href="templates.html">

11 comments on
“Introducing HTML’s new template element”

  1. @brucel @stopsatgreen I honestly still can’t see the value in this tag. I’ll try to write up my thoughts on this soon.

  2. Anorak corner: they remind me of a souped-up version of repeating form templates that were part of web forms 2 (and implemented in Opera) and since deprecated http://www.whatwg.org/specs/web-forms/current-work/#repeatingFormControls

  3. Your demo page already worked on released Chrome 26.0.1410.43 m, as its agent style sheet has a display:none rule for the template tag and the javascript node cloning leaves no trace of the template parent. :)

  4. Not sure that this is the templating system I’m after http://t.co/4CELjqbNDV Though loading common templates over multiple pages is welcome.

  5. […] Introducing HTML’s new template element by Peteypoo Gasston […]

  6. It looks like a very nice alternative to having content in hidden DIVs that are then shown later on. Or for a cleaner way to insert table rows, etc. dynamically.

  7. HTML templates will be shareable across multiple pages <link rel=“components” href=“templates.html”> http://t.co/FiHYowRNcT

  8. FYI: the spec has changed to be rel=“import”:

  9. HTML5 spec is getting a <template> element! Yep, the same that’s used in PHP.Gt. Read about it here: http://t.co/GvzMJwSUco

  10. […] Introducing HTML’s New Template Element at Broken Links […]

  11. […] web componentlerle tamamen uyumlu şekilde çalışabilir olarak tasarlanmıştır. Örneğin, template elementini dahil edebilirsiniz ve tarayıcı tarafından element başlatılana kadar parse […]