Apps

Start looking into the HTML5 template element

The HTML5 template element is still in development, but you can read the spec and start playing around with it now to see how it might figure into your future web designs.

The relatively new HTML5 <template> element specification is still in the experimental stages of development and describes a method for declaring inert DOM sub-trees in HTML and manipulating them to initiate document fragments with identical content.

Essentially, the <template> element is an API that attempts to standardize a client-side approach to declare a markup of fragments as prototypes, which are then serialized and de-serialized within the HTML document, and are used only when needed. Subsequently, authors can hide these fragments so that their content is available at runtime only, but is otherwise ignored by the browser. The <template> element is a part of web components. The specification defines a set of static templates that make it possible to create rich web user interaction (UI) using CSS and HTML markup only.

Browser support

Due to the experimental nature of the <template> element, current browser support is limited to Chrome Canary and Firefox Nightly. Chrome Canary, which has the newest Chrome features, is designed for developers and early adopters, so you can expect a crash or lockup on occasion. Firefox Nightly, includes several browser builds for testing purposes only.

The specification

According to the specification introduction, the <template> element can be placed anywhere within the <head>, <body>, and <frameset> elements, and its contents can contain anything which could otherwise occur within any of those elements. The content of templates is not a part of the document (it does not display, is not matched by querySelector, etc.) and is inactive (e.g., do not cause resources to load, scripts to run, media to play, etc.).

HTML5 feature detection

While there is no native one-size-fits-all HTML5 feature detection available, Modernizr does provide a JavaScript library that detects HTML5 and CSS3 features in the user's browser. Modernizr detects most HTML5 and CSS features and just added feature detection for the <template> element on February 26, 2013, as shown in the code snippet below:

+define(['Modernizr', 'createElement'], function( Modernizr, createElement ) {
+  // <template> HTML tag
+  // http://www.html5rocks.com/en/tutorials/webcomponents/template/
+  // https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html
+  Modernizr.addTest('template', 'content' in createElement('template'));
+});

However, if you are not using Modernizer, you can add the <template> feature detection as demonstrated by Eric Bidelman on HTML5 Rocks Tutorials. The syntax and the script code snippet is displayed below:

function supportsTemplate() {
  return 'content' in document.createElement('template');
}
if (supportsTemplate()) {
  // Good to go!
} else {
  // Use old templating techniques or libraries.
}
Eric goes on to provide two demonstrations including an inert script example that only runs when a button is clicked (Figure B):

Figure B

Once the button is clicked, it adds the content, "Template used %" and a "Thanks!" alert notification, and each click instance adds a line to the content div.

In the second demonstration, Eric provides an example of creating a shadow DOM from a template; a portion of the example is shown in Figure C:

Figure C

I've tested both of Eric's demonstration examples in a mock-up index.html file and each displayed within Chrome Canary with positive results. While it is still in the early stages of development, there is a great future potential for expanding native client-side templating opportunities.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks