web components详述什么是WebComponentsWebComponents是一

【web components详述】什么是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. 如果需要的话，使用和定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到shadow DOM中。 5. 最后在页面中使用我们的自定义元素，就像使用原生HTML元素一样写一个Web Components组件1. 预期效果：预期渲染一个这样的自定义品牌名片到页面上面

文章插图
只要开发者在页面上调用了即可渲染页面，根据规范，自定义元素的名称必须包含连词线，用与区别原生的 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 的方式去实现移动应用，而多端复用的实现渐渐是以组件的形式铺开，例如