Web Components

一、组件化开发

1、组件化开发的优势

• 管理和使用非常容易，加载或卸载组件，只要添加或删除一行代码就可以了

<link rel="inport" href="my-dialog.html">
<my-dialog heading="A Dialog">Lorem ipsum</my-dialog>

• 组件非常灵活，定制非常容易，逐渐往往留出接口，供使用者设置常见属性，比如上面代码的heading属性，就是用来设置对话框的标题。
• 组件是模块化编程的体现，非常有利于代码的重用，标准格式的模块，可以跨平台，跨框架使用，构建、部署和与其他UI元素互动都有统一的做法。
• 组件提供了HTML、CSS、JavaScript封装的方法，实现了与同一页面上的其他代码的隔离
• 组件化开发也便于团队协同开发。
• 当前网站的主流开发方式就是组件化开发，可以像搭积木一样，把组件合在一起，就组成了一个网站。
• 在团队开发中，组件化带来的优势是便于协同开发，有雨代码中的耦合度降低了，每个模块都可以拆分为一个组件，例如异步请求组件，路由组件，各个视图组件，团队中每个人发挥所长维护各自组组件，对整个应用来说是精细的打磨。

2、组件化开发的方式

• 原生DOM操作封装
• jQuery插件
• YUI
• ExtjS
• 原生Web Components
• React
• Angular
• Vue

二、Web Components

Web Components是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。

作为开发者，我们都知道尽可能多的重复代码是一个好主意，这对于自定义标记结构来说通常不那么容易，想想复杂的HTML（以及相关的样式和脚本），有时候您不得不写代码来呈现自定义UI控件，并且如果您不小心的话，多次使用他们会使您的页面变得一团糟。

Web Components旨在解决这些问你题，它由四项主要技术组成，他们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突

• Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，庵后可以在您的用户界面中按照需求使用他们。
• Shadom DOM（影子DOM）：一组JavaScript API，用于封装的“影子”DOM树附加元素，（与主文档DOM分开呈现）并控制其关联的功能，通过这种方式，您可以保持元素的功能私有，这样他们可以被脚本化和样式化，而不用担心与稳当的其他部分发生冲突。
• HTML templates（HTML模板）：[`和``元素是您可以编写不在呈现页面中显示的标记模板，然后他们可以作为自定义元素结构的基础被多次重复使用。
• HTML Imports（HTML导入）：一旦定义了自定义组件，最简单的重用他的方法就是使其定于细节保存在一个单独的文件中，然后使用导入机制将其导入到实际使用它的页面中，HTML导入就是这样一种机制，尽管存在争议，Mozilla根本不同意这种方法，并打算将来实现更合适的。

三、使用Web Components

1、内容：

• 组件注册和使用
• 组件通信
• 组件的生命周期
• 组件插槽

2、基本步骤

2.1 使用