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:
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">
@brucel @stopsatgreen I honestly still can’t see the value in this tag. I’ll try to write up my thoughts on this soon.
trodrigues [April 10th, 2013, 11:24]
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
bruce [April 10th, 2013, 11:54]
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. :)
Monoman [April 10th, 2013, 13:38]
Not sure that this is the templating system I’m after http://t.co/4CELjqbNDV Though loading common templates over multiple pages is welcome.
maboa [April 12th, 2013, 09:12]
[…] Introducing HTML’s new template element by Peteypoo Gasston […]
Bruce Lawson’s personal site : Reading List [April 12th, 2013, 11:44]
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.
MrSpoon [April 12th, 2013, 13:23]
HTML templates will be shareable across multiple pages <link rel=”components” href=”templates.html”> http://t.co/FiHYowRNcT
simevidas [April 12th, 2013, 22:20]
FYI: the spec has changed to be rel=”import”:
Eric [April 12th, 2013, 23:51]
HTML5 spec is getting a <template> element! Yep, the same that’s used in PHP.Gt. Read about it here: http://t.co/GvzMJwSUco
BrightFlair [April 19th, 2013, 09:30]
[…] Introducing HTML’s New Template Element at Broken Links […]
Resources for the new HTML template element | Web TeacherWeb Teacher [July 2nd, 2013, 13:27]
[…] 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 […]
Özel Elementlere Detaylı Bir Başlangıç | Arayüz Ders [March 16th, 2014, 18:21]