W3C web components 简介

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

• https://www.webcomponents.org/introduction

Web组件是一组Web平台API，允许您在Web页面和Web应用程序中创建新的定制的、可重用的、封装的HTML标记。基于Web组件标准的自定义组件和小部件将在现代浏览器中工作，并且可以与任何与HTML一起使用的JavaScript库或框架一起使用。

Web组件基于现有的Web标准。支持Web组件的特性目前正在添加到HTML和DOM规范中，允许Web开发人员轻松地使用封装样式和自定义行为的新元素来扩展HTML。

web components 基于四个主要内容

• custom elements: 自定义元素

  应用新dom元素的基础

• shadow dom: 影子dom

  决定在自定义元素里如何应用内连样式和标记

• html imports: html 导入

  决定html文档的复用性

• html templates: html 模版

  决定如何声明在页面加载时未使用的标记片段，但可以在运行时实例化。

应用和导入自定义组建一样简单，如下

<link rel="import" href="../emoji-rain/emoji-rain.html">
...
<emoji-rain active></emoji-rain>

有很多安装自定义元素的方式，当你发现自己需要的元素时，查阅其安装的README。多数元素可以通过bower安装。

如下部分描述了跨浏览器组建的构建，应用js定义一个新html元素。

／／<app-drawer>:
class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);
／／document.registerElement() 
var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());

使用：与使用原生元素并无两样

<app-drawer></app-drawer>

一个shadow root是关联到host元素的文档片段，创建shadow dom为一个元素，call element.attachShadow()

const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'; // Could also use appendChild().
// header.shadowRoot === shadowRoot
// shadowRoot.host === header

• Polymer https://www.polymer-project.org/；
• Bosonic https://bosonic.github.io/；
• SkateJS https://github.com/skatejs/skatejs