Introduction to the template elements

Introduction to the template elements

Templates allow teams to divide their work, allowing designers to focus on views written in HTML and CSS, while other engineers focus on logic and back end integration.

In this article, you'll learn how to use a new HTML element that is already available on Chrome, Opera, Firefox and Safari.

For those who prefer to watch instead of read, here is a summary of how it works.

Why Templates for browsers?

"Templates" used to be a technology frequently used with server side technologies such as PHP, Django (Python) or Ruby on Rails. But lately it's becoming more common to use templates in the browser.

This is primarily driven by the changing landscape of web architecture. Servers are becoming more dedicated to processing data, clients are becoming more dedicated to user interactions and views. MVC (Model, View, Controller) is no longer a server side only pattern, it's becoming a client side thing - look at AngularJS, Backbone.js, Ember.js, etc.

Solutions for browser side templating in the past used JavaScript. For example, Mustache.js, Handlebars.js, AngularJS, Backbone.js. But techniques used in those libraries have a few pitfalls.

Using div tag:

In the following example, the template is actually a div tag which is hidden with a bit of CSS. The downside of this approach is that the browser will fetch resources from inside the template, even if those resources haven't been used yet. In this case, logo.svg.

<div style="display:none;">
    <h1>Web Components</h1>
    <img src="">

Using script tag:

In the following example, the template content is stored inside of a script tag. The down side of this approach is that the templates will be converted into DOM elements using .innerHTML, which could introduce a cross site scripting vulnerability if an adequate sanity check is not performed.

<script type="text/template">
    <h1>Web Components</h1>
    <img src="">

And this is where native <template> comes in. <template> addresses these problems by providing an ability to insert "inert HTML tags" into a document.

By using "inert HTML tags":

  • inlined scripts won't be executed without being stamped out
  • resources such as img or video won't be fetched without being stamped out

How do I use templates?

To define a template, simply wrap your content with a <template> tag.

<template id="template">
    <h1>Web Components</h1>
    <img src="">

In order to stamp out the template, you'll need to write a bit of JavaScript.

  var template = document.querySelector('#template');
  var clone = document.importNode(template.content, true);
  var host = document.querySelector('#host');
<div id="host"></div>

Here's a live example.

The template node queried on first line will be cloned using document.importNode(). By assigning true to the 2nd argument, we are creating a deep copy. Appending it to another node will bring the contents of the template to life, in other words

  • Included script tags will be executed
  • Included resources (img, video, etc) will be fetched
  • Included style tags will take effect

The template element doesn't provide data binding

If you have experience working with other template engines such as AngularJS, Mustache.js, etc, you may expect to be able to use


<template bind="{{items}}"></template>


<template repeat="{{item in items}}"></template>


<template if="{{}}"></template>

but these are different concepts from vanilla templating. These concepts are actually called "data binding" and are not implemented in the native template element. If you are interested in using these features, I recommend looking into Polymer (TemplateBinding) or x-tags.

Supported browsers

The template element is supported by Chrome, Opera, Safari and Firefox as of October 2014. To check availability, go to For polyfilling Internet Explorer and other legacy browsers, you can use platform.js.


If you are interested in learning more about the template element, head over to: