Web Components 是什么？它为什么对我们这么重要？

Web Components 是什么？它为什么对我们这么重要？
http://sentsin.com/web/1089.html

原文链接 What are WebComponents and why are they important?

摘要

先看一看未来的 WebComponent 标准，再简单了解怎么写 WebComponents，最后说说它的重要性。

简介
这篇文章简单介绍 WebComponent 标准，介绍哪些浏览器已经开始支持 WebComponents，讨论 WebComponents 能解决什么问题，以及它对 web 开发的重要性。你可以了解到如何利用 Vanilla javascript 编写一个简单的 WebComponent，我还会针对它的潜在优势分享我自己的一些拙见。

什么是 web components ?
近年来，web 开发者们通过插件或者模块的形式在网上分享自己的代码，便于其他开发者们复用这些优秀的代码。同样的故事不断发生，人们不断的复用 javascript 文件，然后是 CSS 文件，当然还有 HTML 片段。但是你又必须祈祷这些引入的代码不会摧毁你的网站或者web app。WebComponents 是这类问题最好的良药，通过一种标准化的非侵入的方式封装一个组件，每个组件能组织好它自身的 HTML 结构、CSS 样式、javascript 代码，并且不会干扰页面上的其他代码。

The Shadow DOM
大家之前可能听说过 shadow DOM，但 shadow DOM 到底是什么？ 开发者能通过 shadow DOM 在文档流中创建一些完全独立于其他元素的子 DOM 树（sub-DOM trees）， 由于这个特性，使得我们可以封装一个具有独立功能的组件，并且可以保证不会在不无意中干扰到其它 DOM 元素。shadow DOM 和标准的 DOM 一样，可以设置它的样式，也可以用 javascript 操作它的行为。主文档流和基于 shadow DOM 创建的独立组件之间的互不干扰，所以组件的复用也就变得异常简单方便。

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

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

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

试写第一个 WebComponent
现在你应该已经对 WebComponents 有了一定的了解，但我想通过一个简单的例子能让你更好的理解上面那些枯燥的概念。以下代码展示了一个最简单的 WebComponent 由哪些元素组成，用