微前端如何做样式隔离？

问题示例className 命名重复导致的样式冲突

我们先创建一个问题，验证样式冲突的存在：

(相关资料图)

在主应用和子应用上分别使用 div 元素插入一段标题，两个 div 元素使用相同的 class 名title，分别在 class 中设置文字颜色，主应用 color 值为 yellow，子应用为 red。

由于子应用的样式晚于主应用加载，所以主应用的样式会被覆盖。

以上问题在同时加载多个子应用时也会存在：各个应用之间也可能存在同名的 className 或者给相同条件的选择器添加了样式， 那么最终只有优先级最高的样式才会生效。要确保应用之间的样式不会互相影响，就需要对应用间的样式进行隔离。

html、body 标签的样式冲突

html 、 body 标签， 在各个应用中都是唯一的元素，其样式必然会对主应用的样式产生影响。

解决方案

为了以上样式冲突问题，通常有以下两种思路：

通过样式命名 & 样式优先级解决通过宿主环境隔离来达到样式隔离样式命名 & 样式优先级

假设各个应用之间的样式 className 都是全局唯一的， 那么不同 className 下的样式就一定不会发生冲突。

再加上样式优先级来配合解决，就能解决标签选择器的样式冲突：

例如在原 className 、标签选择器前面再添加一个 selector标签选择器 + 属性选择器子应用改造

这里需要处理的样式也分为以下两种：

UI组件库等引入的全局样式

默认情况下，UI 组件库的 prefixCls 都是相同的，不过它们提供了 ConfigProvider 可以用来修改 UI 组件库全局样式的 prefixCls：全局化配置 ConfigProvider - Ant Design[1]全局配置 ConfigProvider | ArcoDesign[2]

自定义样式

通过 BEM、CSS Modules、 CSS in JS 等手段来获得与其他应用不同的选择器名，来规避样式冲突。

或者直接使用 postcss 的插件，在编译阶段给所有样式添加 prefix selector。

https://github.com/RadValentin/postcss-prefix-selector

主应用在运行时统一转换样式

如果不想或者无法干涉子应用的打包配置时，我们也可以通过主应用在运行时给所有样式规则添加 prefix selector，来提升样式优先级。

比如 A 应用的类选择器.title，在转换后变成#garfish_app_id_xxx .title，#garfish_app_id_xxx是子应用最外层元素的 id，故保证该应用下的样式优先级变高，并让其只作用在当前应用下。

当然， 仅使用以上手段并不能解决子应用 html、 body 标签给主应用带来的样式影响，细心的你可能已经发现，garfish 会为每个子应用创建一个假的 html 与 body 元素，然后对应子元素的 html 、body 样式都会应用到这个假的 html、 body元素上。

Garfish

在 garfish 中是以插件来支持运行时转换样式的：

import { GarfishCssScope } from "@garfish/css-scope";Garfish.run({  plugins: [      GarfishCssScope({          fixBodyGetter: true,          excludes: ["appName"],      }),  ],})

具体的源码实现在这里：

https://github.com/modern-js-dev/garfish/tree/1f83e8fb35fd2ac12785fc7410015c3cd23c3bd2/packages/css-scope

优点

支持大部分样式隔离需求，能够同时处理 UI 组件库的全局样式与自定义样式，比较省心。

缺点

运行时处理样式，会有一定性能损耗

如果其他子应用或者主应用中使用了 !important ...

宿主环境隔离Shadow DOM

附加并隐藏在常规 DOM 下的节点叫做 Shadow DOM —— 它以 Shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，就和普通的 DOM 元素一样，它可以通过方法添加子节点、设置属性，以及为节点添加自己的样式，隐藏的 DOM 样式和其余 DOM 是完全隔离的，类似于 iframe 的样式隔离效果。

如何创建

可以使用shadowHostElement.attachShadow()方法来将一个 shadow root 附加到调用方法的元素上。它接受一个配置对象作为参数，该对象有一个mode属性，值可以是open或者closed：

let shadowRoot = shadowHostElement.attachShadow({mode: "open"});let shadowRoot = shadowHostElement.attachShadow({mode: "closed"});

open表示可以通过页面内的 JavaScript 来获取 Shadow DOM，例如使用Element.shadowRoot属性：

let shadowRoot = shadowHostElement.shadowRoot;

如果将mode设置为closed，那么elementRef.shadowRoot将会返回null。

浏览器中的某些内置元素就是如此，例如

为 shadowDOM添加样式

我们可以通过创建