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 Com­po­nents, a suite of emerg­ing stan­dards that make it pos­si­ble to build secure reusable wid­gets using web plat­form tech­nolo­gies. One of the first specs to make its way into imple­men­ta­tion is HTML Tem­plates, embod­ied by the template ele­ment, which as I write this is imple­ment­ed in Chrome Canary and Fire­fox Nightly.

If you’ve used Mus­tache, Han­dle­bars or any sim­i­lar front-end tem­plat­ing library you’ll be quite famil­iar with how the template ele­ment works: you just include it in your doc­u­ment (it’s appar­ent­ly legal inside head or body), per­haps with a unique id for easy ref­er­ence, and add some markup inside it; for example:

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

The template ele­ment will be parsed by the brows­er but not ren­dered in the page; the markup inside is con­sid­ered com­plete­ly inert, mean­ing no style rules will be applied, and no assets loaded. In order to use the tem­plate markup you’ll need to acti­vate it by plac­ing it into the DOM using JavaScript. As an illus­tra­tion let’s pre­sume I have the above markup in my doc­u­ment, along with some con­tent 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 ele­ment by using the cloneNode() method on the content prop­er­ty, 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 ele­ments will be append­ed to div#bar, after the h1 ele­ment; note that the markup becomes active at this point, so any rel­e­vant assets will be loaded. The result­ing 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 your­self in this exam­ple file:

Demo: the template element

As men­tioned, this is already imple­ment­ed in Chrome Canary (you’ll need to enable the exper­i­men­tal WebKit fea­tures flag in chrome://flags/) and Fire­fox Night­ly, although there’s no news yet on when this will be in a release version.

This is a real­ly sim­ple exam­ple, but hope­ful­ly you can see how rich with poten­tial this is; you can dynam­i­cal­ly update the code each time you clone it, mak­ing it total­ly reusable. The template ele­ment is just a small part of Web Com­po­nents, which I’ll be aim­ing to cov­er in more detail over the com­ing months.

NB: After writ­ing this post I found the arti­cle HTM­L’s New Tem­plate Tag on HTML5 Rocks!, which cov­ers the sub­ject in a lit­tle more depth. It’s writ­ten by Eric Bidel­man, who’s pret­ty much the author­i­ty on Web Components.

Update: I should point out that when the spec is ful­ly imple­ment­ed, tem­plates will be share­able across mul­ti­ple pages by link­ing to them in the doc­u­ment head:

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

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

  1. @brucel @stopsatgreen I hon­est­ly still can’t see the val­ue in this tag. I’ll try to write up my thoughts on this soon.

  2. Anorak cor­ner: they remind me of a souped-up ver­sion of repeat­ing form tem­plates that were part of web forms 2 (and imple­ment­ed in Opera) and since dep­re­cat­ed 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 tem­plate tag and the javascript node cloning leaves no trace of the tem­plate parent. :)

  4. Not sure that this is the tem­plat­ing sys­tem I’m after http://t.co/4CELjqbNDV Though load­ing com­mon tem­plates over mul­ti­ple pages is welcome.

  5. […] Intro­duc­ing HTML’s new tem­plate ele­ment by Petey­poo Gasston […]

  6. It looks like a very nice alter­na­tive to hav­ing con­tent in hid­den DIVs that are then shown lat­er on. Or for a clean­er way to insert table rows, etc. dynamically.

  7. HTML tem­plates will be share­able across mul­ti­ple 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 get­ting a <tem­plate> ele­ment! Yep, the same that’s used in PHP.Gt. Read about it here: http://t.co/GvzMJwSUco

  10. […] Intro­duc­ing HTML’s New Tem­plate Ele­ment at Bro­ken Links […]

  11. […] web com­po­nentler­le tama­men uyum­lu Ĺźek­ilde çalışa­bilir olarak tasar­lan­mıştır. Ă–rneÄźin, tem­plate ele­men­ti­ni dahil ede­bilirsiniz ve tarayıcı tarafın­dan ele­ment baĹźlatılana kadar parse […]