Web Components是W3C制定的一种规范，可用于构建独立的Web应用组件，主要包含以下4个模块：模板元素，HTML Import，Shadow DOM，自定义元素。
1. 模板元素
<template>元素中可以包含HTML标签，样式和脚本，这些都是可复用的。
检测浏览器是否支持模板特性：
var isTemplateSupported=function(){
var tmpl=document.createElement('template');
return 'content' in tmpl;
};
兼容性：http://caniuse.com/#feat=template
为了提高Web应用的性能，模板中的内容默认是不加载的，它不在DOM结构中，需要手动加载。有两种方式：
（1）克隆节点
<template id="template1">
...
</template>
<div id="container1"></div>
var container=document.querySelector('#container1');
var tmpl=document.querySelector('#template1');
container.appendChild(tmpl.content.cloneNode(true));
其中，cloneNode(true)表示深克隆，目标节点的子节点也被克隆。
cloneNode(false)表示浅克隆，只克隆目标节点，不克隆目标节点的子节点。
（2）节点导入
var container=document.querySelector('#container1');
var tmpl=document.querySelector('#template1');
container.appendChild(document.importNode(tmpl.content,true));
其中，document.importNode(targetNode,true)表示深克隆。
2. HTML Import
通过HTML Import可以将外部HTML文档嵌入当前的文档中。
<link rel="import" href="fileName.html" >
检测浏览器是否支持HTML Import特性：
var isImportSupported=function(){
var link=document.createElement('link');
return 'import' in link;
};
兼容性：http://caniuse.com/#feat=imports
访问引入的文档：
<link id="link1" rel="import" href="fileName.html" >
<div id="container1"></div>
var container=document.querySelector('#container1');
var externalDocument=document.querySelector('#link1').import;
container.appendChild(externalDocument.querySelector('...').cloneNode(true));
#link1会导入一个html，包括<html>，<head>，<body>等等，
externalDocument是该html的document对象，
因此，可以使用externalDocument.querySelector来获取html中的元素。
HTML Import支持两种事件：load事件与error事件
3. Shadow DOM
Shadow DOM的引入就是为了解决由封装机制的作用域造成的问题，它将Web Components的HTML，CSS和JavaScript打包，不受外部作用域影响。
检测浏览器是否支持Shadow DOM特性：
var isShadowDOMSupported=function(){
return 'createShadowRoot' in document.body;
};
兼容性：http://caniuse.com/#feat=shadowdom
Shadow DOM使得我们可以将一棵DOM子树插入正在渲染的文档中，每一个DOM树上的子节点，都能再拥有它自己的Shadow DOM树。
拥有至少一个Shadow DOM子树的DOM元素，称为宿主元素（host element），也叫作Shadow host。
注：宿主元素可以用:host选择器来选择
<div id="host1"></div>
var host=document.querySelector('#host1');
var shadowRoot=host.createShadowRoot();
shadowRoot.innerHTML='hello';
4. 自定义元素
Web Components规范中还规定了，如果在DOM中创建出一个全新的元素，那么自定义元素可以有自己的属性和方法。
检测浏览器是否支持自定义元素特性：
var isCustomElementSupported=function(){
return 'registerElement' in document;
};
兼容性：http://caniuse.com/#feat=custom-elements
要开发一个自定义元素，需要5个步骤：创建对象，定义对象的属性，定义生命周期方法，注册新元素，扩展元素。
（1）创建对象
使用Object.create来创建对象，第一个参数是对象的原型，第二个参数是对象的属性。
var element=Object.create(HTMLElement.prototype);
（2）定义对象的属性
使用Object.defineProperty和Object.defineProperties这两个方法定义一个对象的属性。
Object.defineProperty(element, 'title', {
writable:true
});
（3）定义生命周期方法
在JavaScript中，对象的生命周期是由一个个不同的状态组成的，先后顺序是：
被创建createdCallback，插入到DOM中attachedCallback，
从DOM中移除detachedCallback，对象的某一属性值更新attributeChangedCallback，
element.createdCallback=function(){
//
};
（4）注册新元素
使用document.registerElement方法，可以在DOM中注册一个新元素。
var MyNameElement=document.registerElement('my-name',{
prototype:element
});
// 以下向body中动态加载该元素，也可以直接在html中写<my-name>标签
var myNameElement=new MyNameElement();
myNameELement.innerHTML='hello';
document.body.appendChild(myNameElement);
将产生如下HTML：
<my-name>hello</my-name>
（5）扩展元素
一个元素可以用extends继承原生元素或者其他自定义元素。
var myNameElement=document.registerElement('my-name',{
prototype:element,
extends:'i'
});
var myNameElement=new MyNameElement();
myNameELement.innerHTML='hello';
document.body.appendChild(myNameElement);
将产生如下HTML：
<i is="my-name">hello</i>
以上（4）（5）也可以不使用构造器，
直接在HTML中分别加入<my-name>和<i is="my-name">，也会触发createdCallback事件。
5. 新增的CSS选择器
（1）:unresolved
当自定义元素被加载并注册到DOM时，浏览器将选择出匹配的元素，然后根据该元素所在的生命周期将它升级。
在这个升级过程中，这个元素将暴露给浏览器，此时它是没有任何样式的。
我们可以通过使用:unresolved伪类选择器，避免没有样式的内容闪现。
my-name:unresolved::after{
content:'Registering Element ...';
color:red;
}
（2）:host
Shadow DOM的宿主元素可以通过:host伪选择器来获取到。
:host{
text-transform:uppercase;
}
（3）::shadow
宿主的Shadow DOM子树可以通过::shadow伪元素选择器应用样式。
:host::shadow h1{
color:orange;
}
注：Shadow DOM是:host的伪元素，而不是子元素，因此:host::shadow中间不能加空格
（4）::content
content插入点元素可以通过::content伪元素应用样式。
:host ::content b{
color:blue;
}
参考：
WEB COMPONENTS CURRENT STATUS
Learning Web Component Development
