Getting Start HTML's Template

Outline

We’ve used html template when we develop web app by using some tricks.

But now we can use template function safely and conveniently if you use new Template.

Capability

can i use : http://caniuse.com/#feat=template

At the moment (2014/10/27) we can not use it only IE.
In all of modern browser we can use it.

Benefit

• The markup is hidden and dose not rendered until activated.
• Request to get any resources dose not work until activated.
• You can not get inner contents of template element.
• You can put template element in head, body, and frameset.

Usage

If you have following template you can use it with 2 ways below.

<template id="mytemplate">
	<div class="comment">this is new contents generated from template element.</div>
</template>

<section id="host"></section>

basic

var t = document.querySelector('#mytemplate');
var host = document.querySelector('#host');
var clone = document.importNode(t.content, true);

host.appendChild(clone);

with shadow dom

var t = document.querySelector('#mytemplate');
var host = document.querySelector('#host-target').createShadowRoot();
var clone = document.importNode(t.content, true);

host.appendChild(clone);

Reference

• https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
• http://www.html5rocks.com/en/tutorials/webcomponents/template/