什么是Web Components

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

• 组件化开发已经是前端主流开发方式，因为组件化开发在代码复用提升团队效率方面有着无可比拟的优势，现在流行的React，Vue都是组件框架。
• 谷歌公司一直在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。目前，它还在不断发展，但已经可用于生产环境。

组件：最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。
使用方法
1. 创建一个类或函数来指定web组件的功能，推荐请使用 ECMAScript 2015 的类语法。
2. 使用 CustomElementRegistry.define() 方法注册自己的新自定义元素 ，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。
3. 如果需要的话，使用Element.attachShadow() 方法将一个shadow DOM附加到自定义元素上。使用原生的DOM方法向shadow DOM中添加子元素、事件监听器等。
4. 如果需要的话，使用 <template>和<slot> 定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到shadow DOM中。
5. 最后在页面中使用我们的自定义元素，就像使用原生HTML元素一样
写一个Web Components组件
1. 预期效果：预期渲染一个这样的自定义品牌名片到页面上面

只要开发者在页面上调用了<company-card></company-card>即可渲染页面，根据规范，自定义元素的名称必须包含连词线，用与区别原生的 HTML 元素
2. 自定义的元素需要使用js类来创建，页面中所有的自定义元素都会是这个类的实例：

然后就可以实现基础效果：

然后我们的js直接取出自定义元素上面的属性赋值给对应的标签即可

3.使用template来创建元素

• 如果使用原生js来创建组件，我们的开发效率会大打折扣，达不到我们想要的组件化提升效率的目的，所以浏览器提供了template来创建元素，重新写一下样式代码。
• 同时组件里面的数据，我们可以通过在自定义标签上写属性，传入到组件里面，更加符合组件开发的思路。

然后我的js直接取出自定义元素上面的属性赋值给对应的标签即可。

4. 加入样式
组件的样式需要加入到template组件里面，为每个组件独享的样式，跟vue思路差不多最终的template可能是这样的

5. 最终实现效果

生命周期函数 在custom element的构造函数中，可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用

结语：

不得不承认，Web Components 标准的提出解决了一些问题，必须交由浏览器去处理的是 Shadow DOM，在没有Shadow DOM 的浏览器上实现代码隔离的方式多多少少有缺陷。个人我觉得组件化的各个 API 不够简洁易用，依旧有 getElementById 这些的味道，但是交由各个类库去简化也可以接受，而 import 功能上没问题，但是加载多个

组件时性能问题还是值得商榷，标准可能需要在这个方面提供更多给浏览器的指引，例如是否有可能提供一种单一请求加载多个组件 HTML 的方式等。

在现在的移动化趋势中，Web Components 不仅仅是 Web 端的问题，越来越多的开发者期望以 Web 的方式去实现移动应用，而多端复用的实现渐渐是以组件的形式铺开，例如 React Native 和 Weex。所以 Web Components 的标准可能会影响到多端开发 Web 化的一个模式和发展。

但是，对于Web Components的发展前景还是比较看好，生产环境下还是观望一下就好。