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 之间的关联，然后将自定义标签（例如
试写第一个 WebComponent My favorite colour is: Red 这个简单的例子演示了如何创建一个易复用、可维护的 WebComponent。 WebComponent 兼容性 意料之中的是基于 Blink 的浏览器在这方面处于领先地位。上表清晰的告诉我们，哪怕是最简单的 WebComponent 例子也必须用 Chrome 或 Opera 运行。 填补空缺 WebComponents 的重要性 无害插件 一劳永逸 维护与测试 Abstraction HTML 的故事 传统的 HTML 写法 Here is some simple content in the content area. A simple footer WebComponents 的语义化写法 Here is some simple content in the content area. 另一个大坑 X-Tag 组件 (源码) Hello :) Hello {{who}} :) 我对 Angular 2 也有同样的担心，他们声称完全支持 WebComponent 标准，但显然还会有很多框架层面的东西。Angular 团队应该很清楚该怎么做并且为什么这么做，希望利大于弊吧。如果 Angular 团队成员能看到这篇文章，并向大家介绍 WebComponents 在 Angular 2 中的用法，那就再好不过了。 前面提到了语义化 HTML 标签的好处，我们通过阅读代码就能快速理解它的含义。当然这还取决于开发者是否使用语义化标签和语义化的自定义属性做开发。更重要的是，社区应尽快提供优秀的最佳实践来引导普通开发者形成更好的习惯。 总结 你可以在 WebComponents.org 这个网站了解更多关于 WebComponents 的知识。他们的 GitHub 账号 里有很多适合学习的例子，本文的例子也来自其中。 我会很乐意听到你们对本文的评论和对 WebComponent 的见解
现在你应该已经对 WebComponents 有了一定的了解，但我想通过一个简单的例子能让你更好的理解上面那些枯燥的概念。以下代码展示了一个最简单的 WebComponent 由哪些元素组成，用包裹 HTML 和 样式代码，用 javascript 将这些绑定到自定义标签
你可能会说：“确实很diao，但尼玛什么时候才能 '真正' 用得上呢？”。我会告诉你：“现在就能用了少年”。下面的表格列出了主流浏览器对 WebComponent 中各个特性的兼容性。 Web Components 是什么？它为什么对我们这么重要？
虽然大部分浏览器还不支持 WebComponent ，但是有个叫做 webcomponentsjs 的兼容库，可以让 WebComponent 在不支持它的浏览器上运行起来。只要你在项目中引入这个库，就可以像上面的例子那样将 WebComponents 用起来。
WebComponents 将如何改变当前的 Web 开发模式？本文的开头已经给出了答案，“通过一种标准化的非侵入的方式封装一个组件”，但这究竟能带来哪些好处呢？
本文的前面已经介绍了开发者可以通过 shadow DOM 创建子 DOM 树，并且不会被页面上的 CSS 样式和 javascript 脚本所影响。显而易见的好处就是当你引入一个第三方组件的时候，不用担心它会对你的网站其他功能造成影响。对于开发者来说，开发无害插件变得更简单了。下面的例子用刚才写的 WebComponent 展示了这种封装的独立性。在 WebComponent 内部定义了一个名为colour的类，并将color属性设置为 red 。在主页面中colour类的color为 green 并被设为!important，你会发现在 WebComponent 中的颜色还是展示为红色。 你可以访问 Github 获取示例代码。
标准的目的是增强通用性。一旦 WebComponents 被广泛支持起来，我们就能开发更通用的组件，而不用考虑其他项目用的是什么技术。再也不用针对 jQuery 写插件，再也不用为 Angular JS 写 directives，再也不用为 Ember.js 写 addons。 一劳永逸，是 WebComponents 带来的最大好处。作为一个全职的 Angular JS 开发者，经常需要将 jQuery 插件翻译成 directives，然后才能在我的项目里用起来，这些工作非常繁琐。程序员不应该局限于某一种前端框架，但现实情况是我们正在被一个个前端框架所限制，因为不同框架的代码不能共享。WebComponents 能将我们从水深火热之中解救出来。
通过这样的标准编写的组件具有更好的可维护性。最佳实践能够更快的被采用，并给我们带来更快更可靠的 Web 应用。测试会变得更简单，测试规范也能随着组件一起发布。
我们可以在 WebComponents 里开发复杂的功能，就可以将较少的精力耗费在开发复杂 Web 应用上了。你只需要将这些组件组装起来，保证他们之间能够互相通信，就能组装出一个完整应用。以 Angular JS 1.x 为例，不需要写 controllers，不需要写 directives，不需要写那么多的 scope，只要提供一些基本的服务和路由就行。当然 Angular 2.0 已经将 WebComponents 规划进去了。
HTML 5 规范带来了一些新的语义化标签，例如
上述的那些优点能让 Web 开发变得更美好，希望你跟我一样激动并满怀期待。但是...也有可能带来一些问题，历史一次次证明 Web 标准的实际应用可能会分裂为多个分支，给我们带来艰难的抉择，我担心这样的事情也会发生在 WebComponents 身上。 Web Components 是什么？它为什么对我们这么重要？ 目前已经有三个基于 WebComponent 标准的框架，并且都很好的兼容低级浏览器。这本来是件好事，但也意味着我们开发 WebComponents 应用时有三个选择：X-Tag, Polymer, Bosonic。既然都是支持 WebComponent 标准，那么基于 Polymer 开发的组件代码能够用在 x-tag 组件里吗？反过来呢？看看下面的例子。
WebComponents 能彻底改变 Web 开发，但还需时日。前端社区需要做大量工作才能使 WebComponents 变得真正可用，才能让大家享受到组件式 Web 开发的便利。