前端模板中，我们通常使用 script/textarea 来存放模板代码，然后使用 innerHTML/value 属性来获取模板内容进行解析和拼装。
<script type="text/x-template" id="tpl">
<h1><%=data.title%></h1>
<p><%=data.content%></p>
</script>
<script>
var htmlTpl = document.getElementById("tpl").innerHTML;
tplEngine(htmlTpl, {
title: "This is title",
content: "This is content"
});
</script>
关于 tplEngine 这个 Javascript 模板引擎，之前也写了篇 文章 介绍过，这里就不赘述了。除了使用 script 标签，textarea 也可以达到同样的效果，但是本文叙述的重点并不是如何去解析一个 JavaScript 模板。
W3C工作组在 HTML 中加入了一个新的标签 ——TEMPLATE。他提供了一个可以定义 HTML 代码片段的机制，下面就来详细说说这个 TEMPLATE 标签。
本文地址：http://www.cnblogs.com/hustskyking/p/javascript-template-tag.html，转载请注明源地址。
运行下面的 demo，或许你已经知道了一些东西了。
<ul id="list">
<!-- TEMPLATE 模板 -->
<template id="tpl">
<li><span></span> - <span></span></li>
</template>
</ul>
<button id="btn">见证奇迹的时刻→</button>
<script>
var datas = [
{name:"李靖", age:"21"},
{name:"Barret Lee", age:"21"}
];
btn.onclick = function(){
for(var i = 0, len = datas.length; i < len; i++){
var data = datas[i];
// 获取模板代码
var htmlTpl = tpl.content.cloneNode(true);
// 插入数据
var spans = htmlTpl.querySelectorAll("span");
spans[0].textContent = data.name;
spans[1].textContent = data.age;
// 插入到 DOM 中
list.appendChild(htmlTpl);
}
};
</script>
这里使用的 template 标签，标签的内容没有被解析，我们并没有也使用 innerHTML 这种暴力手段获取模板内容。
document.getElementById("tpl").length, 或者看看他其他的属性，得到的结果都是
undefined。每一个 template 元素都会和一个 DocumentFragment 对象关联，当一个 template 元素被创建时，浏览器会运行如下操作：
上面的过程我是翻译 w3c 的规范文档，读起来相当晦涩，如果你了解 shadowDOM,那理解起来就轻松了，template 在解析是，其内容被解析成一个 shadowDOM，我们只能使用 content 属性来获取到这个 shadowDOM 的内容。
很可惜，这玩意儿虽然好用，但 IE 目前还不支持，当然 Chrome 32+ | Firefox 25+ 都提供了支持。
从上面的 demo 中，可以发现，获取 template 标签的内容，其方式是：
document.getElementById("tpl").content但是我并不是直接将 content 赋值给 htmlTpl，而是：
htmlTpl = tpl.content.cloneNode(true);
为什么要这么做呢？如果你不是用 cloneNode，而是直接将内容 appendChild 到 DOM 树中，documentFragment 内的内容就会被清空，上面我们说了 template 标签内容就是一个 documentFragment 的 shadowDOM，所以应该使用 cloneNode 或者 importNode 方法将内容复制到 DOM 中，这样才能保证这个 shadowDOM 内容不被清空，从而可以复用（你可以把上面 demo 的 cloneNode 函数去掉，看看结果如何）。
其实也没有比较好的降级处理方案，如果你在 template 中放了 script 或者 img 节点，这些内容都会被解析出来，你阻止不了，所以如果你的程序要兼容所有的浏览器，暂时就不要用了。当然，你可以做这样的判断：
if (!"content" in document.createElement("template")){ // code here.. return; }
在 script 标签中嵌入一个 script 标签，这个几乎是不可能的事情吧，但是 template 可以：
<template id="ulList"> <li> <strong><%=content%></strong> <template> <div> <p><%=detail%></p> </div> </template> </li> </template>
至于插入之后是个什么效果，读者可以自己去浏览器中查看。这种插入方式是有使用场景的，很多时候我们都是给需要应用模板的元素设置一个 id 或者 class ，方便找到他们，而这种直接插入的方式，我们可以利用模板代码直接找到需要应用模板的元素，如：
var tpl = ulList.getElementsByTagName("template")[0]; // 获取模板 var toBox = tpl.parentNode; // 直接定位要插入的位置 toBox.appendChild(tpl.content.cloneNode(true)); // 插入
Web Components 是一些规范，旨在以浏览器原生的方式向外提供组件，它的规范如下:
其实本文提到的内容就是 web components 的冰山一角，感兴趣的童鞋可以去读一读相关的内容。
本文稀里哗啦说了一大串，主要是简单介绍 web components 中的 template 标签，用以替换模板代码容器 script/textarea，web components 肯定是 web 发展的一个大头，尤其是移动开发上，很有必要深入研究。
原文：http://www.cnblogs.com/hustskyking/p/javascript-template-tag.html