微前端架构核心要点对比

1. 样式隔离

常见的隔离方式有以下几种，还是根据自身业务来确定：

1.1. shadowDOM

目前相对来说使用最多的样式隔离机制。

但shadowDOM并不是银弹，由于子应用的样式作用域仅在 shadow 元素下，那么一旦子应用中出现运行时“翻墙”跑到外面构建 DOM 的场景，必定会导致构建出来的 DOM 无法应用于应用的样式的情况。比如：子应用里调用了 antd modal 组件，由于 modal 是动态挂载到 document.body 的，而 antd 的样式只在 shadow 这个作用域下生效，结果就是弹出框无法应用到 antd 的样式。解决的办法是把 antd 的样式上浮一层，丢到主应用的DOM上。

1.2. BEM、CSS Modules

1.2.1. BEM：Block Element Module命名约束

• B：Block 一个独立的模块，一个本身就有意义的独立实体 比如：header、menu、container.

• E：Element 元素,块的一部分但是自身没有独立的含义 比如：header title、container input.

• M：Modifier 修饰符，块或者元素的一些状态或者属性标志 比如：small、checked.

模块：.Block
模块多单词：.Header-Block
模块_状态：.Block_Modifier
模块__子元素：.Block__Element
模块__子元素_状态：.Block__Element_Modifier