主要内容

WEB组件化的历史
什么是WEB Components
WEB Components关键技术
介绍下Custom Elements
如何过滤组件用到的样式

WEB组件化的历史

近年来，WEB开发者们通过插件或者模块的形式让其他开发者能复用这些代码。但是你又不完全确定这些引入的代码不会扰乱网站或WEB App已有功能。

htc1.html / htc2.html
http://blog.jobbole.com/77837/

WEB组件化的历史

WEB Components 定义了一种标准化的非侵入的方式封装一个组件，每个组件能管理好它自己的 HTML 结构、CSS 样式、JavaScript 代码，不会干扰到页面上的其他代码。

http://blog.dayanjia.com/2014/06/web-components-introduction/

WEB组件化的难点

JavaScript 缺乏模块化标准
CSS 的全局作用域
缺乏组件解析/加载的基础设施等

WEB组件现状与困境

组件化给前端开发带来了极大的效率提升，组件化的UI框架也不断涌现，从EXTJs、YUI到 jQuery UI ，再到 Bootstrap、React、Ratchet、Ionic等，几乎每年都有很多新的UI框架冒出来，它们或者借鉴或者颠覆其他已存在的框架。

jQuery UI

// 初始化
$( "#dialog" ).dialog({
  dialogClass: "no-close"
});
// 显示
$( ".selector" ).dialog({ show: { effect: "blind", duration: 800 } });
// 关闭事件
$( ".selector" ).on( "dialogclose",  function (e, ui) {
  // do something...
});

Kendo UI

// 初始化
$("#dialog").kendoWindow({
  actions: [ "Minimize", "Maximize" ]
});
// 显示
var dialog = $("#dialog").data("kendoWindow");
dialog.open();
// 关闭事件
var dialog = $("#dialog").data("kendoWindow");
dialog.bind("close",  function (e) {
  // do something...
});

Bootstrap

// 初始化
$('#myModal').modal({
    keyboard: false
});
// 显示
$('#myModal').modal('show');
// 关闭事件
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
});

WEB组件现状与困境

前面通过对 jQuery UI、KendoUI 以及 Bootstrap 中的Dialog组件从初始化、方法调用以及事件响应方面的对比会发现：这些框架仅仅在功能层面相近，代码层面确完全不兼容。

http://fex.baidu.com/blog/2014/05/web-components-future-oriented/

WEB Components是什么

WEB Components提供一系列Web平台API，允许开发人员创建新的自定义的，可复用的，封装过的HTML标签，用于网页和网络应用程序。基于WEB Components标准的自定义组件可以适用于大部分现代浏览器，并且可以与任何其他的JavaScript库或框架一起使用。

Web Components主要四种技术

HTML导入 (HTML Imports)
定义元素 (Custom Elements)
HTML模板 (HTML Templates)
影子DOM (Shadow DOM)

导入HTML外部模板(HTML Imports)

在模板中创建 HTML 代码块和子 DOM 树，使得我们可以用不同的物理文件来组织代码。通过<link>标签来引入这些文件，就像我们在 HTML 中引用 CSS 文件那样简单。 // 005.html

影子DOM(Shadow DOM)

大家之前可能听说过 shadow DOM，但 shadow DOM 到底是什么？开发者能通过 shadow DOM 在文档流中创建一些完全独立于其他元素的子 DOM 树（sub-DOM trees），由于这个特性，使得我们可以封装一个具有独立功能的组件，并且可以保证不会在不无意中干扰到其它 DOM 元素。

影子DOM(Shadow DOM)

主文档流和基于 shadow DOM 创建的独立组件之间的互不干扰，所以组件的复用也就变得异常简单方便。// 006.html

HTML内置模板(HTML Templates)

只要你用过类似 Angular JS 之类的现代 JavaScript 框架，就一定对 HTML 模板再熟悉不过了。开发者通过模板来复用一些 HTML 代码段，在 HTML5 标准下我们甚至不需要 JavaScript 框架就能轻松使用模板。 // 006a.html

自定义元素(Custom Elements)

我们声明一个语义化的自定义元素来引用组件，用 JavaScript 建立自定义元素和模板、shadow DOM 之间的关联，然后将自定义标签（例如<my-custom-element></my-custom-element>）插入到页面上就能得到一个封装好的组件。VUE，React，Angular 中都有很多类似的写法。

介绍下 Custom Elements

浏览器对未知元素的处理

所有浏览器都将未知元素渲染成 inline 的，也就是给它们默认添加一个 display:inline 的 CSS 规则。

001.html[默认] / 001b.html[新版]
http://www.iefans.net/chuli-weizhi-yuansu/

Custom Elements v0

var Mytag = document.registerElement('my-tag');
document.body.appendChild(new Mytag());

var mytag = document.getElementsByTagName('my-tag')[0];
mytag.textContent = 'I am a my-tag element.';
mytag.style.border = '1px solid green'

002.html 003.html

Custom Elements v1

<script>
customElements.define('x-foo', class extends HTMLElement {
  constructor() {
    super()
  }
  // 相当于v0中的attachedCallback
  connectedCallback() {
    this.innerHTML = 'Hello ' + this.id
  }
})
</script>
<x-foo id="a"></x-foo>
<x-foo id="b"></x-foo>

004.html 004a.html

Custom Elements与框架

<template>
  <div class="component-main-view">
    <grid :options="options"></grid>
  </div>
</template>
<script>
  import { grid } from 'grid'
  export default {
    name: COMPONENT_NAME,
    data () { return { options: {} } },
    created () {},
    methods: { },
    components: { grid }
  }
</script>
<style lang="text/css">
  .component-main-view {}
</style>

009.html