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