用解决思路，消除落地qiankun父子应用样式污染

2024-02-24 21:14:00

在qiankun微前端框架中，当父子应用都使用了像element-ui或element-plus这类UI组件库时，我们常常会遇到样式污染的问题。简单来说，就是父应用的样式会影响到子应用的显示效果，反之亦然。这就像两个画家共用一块画布，你一笔我一笔，最后画面变得混乱不堪。

造成这种现象的主要原因是这些UI组件库的CSS类名存在冲突。element-ui和element-plus都使用了el-作为类名前缀，很多组件的类名也十分相似。当它们同时出现在一个页面中时，浏览器的样式渲染引擎就无法区分哪些样式应该应用于哪个应用，最终导致样式互相覆盖，出现显示异常。

此外，即使我们刻意避免使用相同的类名前缀，UI组件库内部的HTML结构也可能存在差异。例如，element-ui的按钮组件可能使用div元素作为容器，而element-plus则使用button元素。这种结构上的差异会导致即使类名不同，样式也可能无法正确应用，从而产生污染。

那么，如何解决qiankun微前端中的样式污染问题呢？我们可以从以下几个方面入手：

1. CSS隔离: 这是最常用的解决方案之一。qiankun框架本身就提供了一些CSS隔离的机制，例如：

Shadow DOM: Shadow DOM可以将子应用的样式封装在一个独立的Shadow Root中，使其与父应用的样式完全隔离。这种方式隔离性最好，但兼容性稍差，一些旧版本的浏览器可能不支持。
CSS Modules: CSS Modules可以将每个CSS文件转换成一个JavaScript模块，并为其中的类名生成唯一的哈希值。这样，即使父子应用使用了相同的类名，最终生成的类名也会不同，从而避免冲突。
CSS-in-JS: CSS-in-JS方案，例如styled-components，可以将CSS样式直接写在JavaScript代码中，并通过JavaScript变量来控制样式的应用范围。这种方式可以更加灵活地控制样式，但也增加了代码的复杂度。

2. 样式前缀: 我们可以为父子应用的样式添加不同的前缀，例如，父应用使用el-，子应用使用app1-。这样可以有效避免类名冲突。但这种方式需要手动修改UI组件库的源码或样式文件，比较繁琐，也容易出错。

3. BEM命名规范: BEM (Block, Element, Modifier) 是一种CSS命名规范，它可以帮助我们编写更加规范、可维护的CSS代码，并减少类名冲突的可能性。例如，我们可以将一个按钮组件的类名命名为.button，它的子元素的类名命名为.button__icon，它的不同状态的类名命名为.button--disabled。

4. 动态加载样式: 我们可以将子应用的样式文件在子应用加载完成后再动态添加到页面中。这样可以避免子应用的样式在加载过程中影响到父应用的显示效果。qiankun框架也提供了一些API来帮助我们实现动态加载样式。

5. 谨慎使用全局样式: 全局样式会影响到页面上的所有元素，包括父子应用。因此，我们应该尽量避免使用全局样式，或者将全局样式的范围限制在特定的作用域内。

常见问题解答：

1. qiankun的CSS隔离机制是如何实现的？

qiankun主要通过Shadow DOM和CSS Modules来实现CSS隔离。Shadow DOM可以将子应用的样式封装在一个独立的Shadow Root中，而CSS Modules可以为每个CSS文件生成唯一的类名。

2. 如何选择合适的CSS隔离方案？

如果对浏览器兼容性要求较高，可以选择CSS Modules或CSS-in-JS方案；如果需要更强的隔离性，可以选择Shadow DOM方案。

3. 使用CSS隔离方案后，父子应用之间如何通信？

父子应用之间可以通过qiankun框架提供的API进行通信，例如actions和props。

4. 如何避免使用全局样式？

我们可以将样式的范围限制在特定的组件或模块内，例如使用CSS Modules或CSS-in-JS方案。

5. 如何调试qiankun微前端应用的样式问题？