Web Components

作用：

Web组件化，可复用UI模块。

标准：

Web Components不是单一的规范，而是一系列的技术组成，包括Template、Custom Element、Shadow DOM、HTML Import四种技术规范。

Template + document.importNode()

Custom Element

自定义网页元素

• 注册自定义元素

var SuperButton = document.registerElement('super-button');

• 添加属性和方法

// 添加属性
Object.defineProperty(SuperButton, "bar", {value: 5});

// 添加方法
SuperButton.foo = function() {
  console.log('foo() called');
};

• 回调函数
  自定义元素的原型有一些属性，用来指定回调函数，在特定事件发生时触发。
  createdCallback：实例生成时触发
  attachedCallback：实例插入HTML文档时触发
  detachedCallback：实例从HTML文档移除时触发
  attributeChangedCallback(attrName, oldVal, newVal)：实例的属性发生改变时（添加、移除、更新）触发

注意，自定义网页元素的标签名必须含有连字符（-），一个或多个都可。

Shadow DOM

封装成一个独立的DOM元素。外部的设置无法影响到其内部，而内部的设置也不会影响到外部.

var shadowRoot = element.createShadowRoot();
document.body.appendChild(shadowRoot);

HTML Import

HTML Import用于将外部的HTML文档加载进当前文档。

假定A网页通过HTML Import加载了B网页，即B是一个组件，那么B网页的样式表和脚本，对A网页也有效（准确得说，只有style标签中的样式对A网页有效，link标签加载的样式表对A网页无效）。

如果B与A不在同一个域，那么A所在的域必须打开CORS。

HTML Import是同步加载，会阻塞当前网页的渲染，这主要是为了样式表的考虑，因为外部网页的样式表对当前网页也有效。如果想避免这一点，可以为link元素加上async属性。当然，

Polymer.js

Web Components是非常新的技术，为了让老式浏览器也能使用，Google推出了一个函数库Polymer.js。这个库不仅可以帮助开发者，定义自己的网页元素，还提供许多预先制作好的组件，可以直接使用。

观点

首先，受制于浏览器厂商利益冲突，也可能是与最初设计思路有偏差，目前只有Chromium完全支持web components规范，离普及还有一定距离。其次，在技术细节上，易用性和鲁棒性都亟待改善，例如组件与组件之间的兼容性。第三，WC只是提供了MVVM中View的解决方案，但是数据绑定甚至是Model模块至今空白。但是前端工程化的大势，vue，react等技术的流行，足以表明Web组件化的重要性。

参考资料：http://blog.jobbole.com/77837/