[JavaScript] 5分钟学一学Web Components规范

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