Web Componets

大白话概述

利用 Web Componets 你可以自定义一个元素如<custom-elemnts></custom-elemnts>然后在这个元素身上自定义一些功能，这些自定义元素就类似于vue、react项目的componet，所以也可以理解它为什么叫Web Components

专业概述

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

Custom elements（自定义元素）： 一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
Shadow DOM（影子DOM） ：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。

tips：如图定义了一个<editable></editable>自定义元素；shadow与主文档DOM分开呈现

HTML templates（HTML模板）： <template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。tips：其实就跟vue的template和slot的作用差不多，我建议大家拉一下MDN上面的模版下来看看就一目了然了（在本章结尾会附上）。

与micro-app的联系

什么是micro-app

micro-app借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。并且由于自定义ShadowDom的隔离特性，是目前市面上接入微前端成本最低的方案。

micro接入实际项目

如图可以看到接入的新应用是在自定义元素<micro-app></micro-app>下面的，然后有两个id为app的标签为什么不会相互影响？这就是利用了ShadowDom的思想（在micro-app中并没有直接使用ShadowDom而是实现了类似的功能）

micro-app的隔离机制

JS 沙箱

micro-app使用Proxy拦截了用户全局操作的行为，防止对window的访问和修改，避免全局变量污染。micro-app中的每个子应用都运行在沙箱环境（沙箱环境可以理解成每个app有自己的环境），以获取相对纯净的运行空间。

tips：虽然默认是隔离的但是父应用和子应用仍然能通过micro-app提供的api去获取父子应用的全局

样式隔离

MicroApp的样式隔离是默认开启的，开启后会以<micro-app>标签作为样式作用域，利用标签的name属性为每个样式添加前缀，将子应用的样式影响禁锢在当前标签区域。

.test {
  color: red;
}

/* 转换为 */
micro-app[name=子应用的name] .test {
  color: red;
}

但基座应用的样式依然会对子应用产生影响，如果发生样式污染，推荐通过约定前缀或CSS Modules方式解决

元素隔离

元素隔离的概念来自ShadowDom，即ShadowDom中的元素可以和外部的元素重复但不会冲突，micro-app模拟实现了类似ShadowDom的功能，元素不会逃离<micro-app>元素边界，子应用只能对自身的元素进行增、删、改、查的操作。

举个栗子🌰 :

基座应用和子应用都有一个元素<div id='root'></div>，此时子应用通过document.querySelector('#root')获取到的是自己内部的#root元素，而不是基座应用的。

tips：在micro-app中基座应用仍然可以获取子应用的元素，这一点和ShadowDom不同，在微前端下基座拥有统筹全局的作用，所以没有对基座应用操作子应用元素的行为进行限制。

后话

由于近日为项目接入了micro-app，因此对这些基本知识做一些梳理，但对框架本身和Web Componets领域的知识还是很陌生的（毕竟才接触了几天），可能有一些地方讲得不好或者不到位的请见谅，如有描述错误的地方也请大家的评论区指出，最后祝和我一样即将面临秋招的各位一切顺利也祝所有看到这里的各位生活愉快！2022.5.15 14:58 上海浦东

参考

developer.mozilla.org/zh-CN/docs/… MDN Web Componets 文档

github.com/mdn/web-com… Web Componet 实现实例

cangdu.org/micro-app/ micro-app 官方文档

Web Components 和微前端框架micro-app的联系