qiankun 样式隔离

如果用strictStyleIsolation: true，会用shadowDom的方式进行隔离。以及加上实验性的样式隔离特性experimentalStyleIsolation: true后，后续可能出现dialog等挂载到全局中时，某些同名样式(特别是同框架的情况下，样式名经常冲突)样式冲突。

而且会导致以下问题。
例如如果子应用用react18进行开发，挂载到id为root的dom上。(vue3的子应用目前没问题)
可能会在子应用跳转阶段出现子应用没法找到root这个元素，导致下面的报错。

application 'reactApp' died in status SKIP_BECAUSE_BROKEN: createRoot(...): Target container is not

看报错是因为没获取到root元素，所以要去子应用中各个地方都要判断子应用是否获取到root的dom

function render() { // 函数这样写 为了解决root 多次渲染的问题
  if (!root) root = ReactDOM.createRoot(document.getElementById('root'))
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )
}


if (!window.__POWERED_BY_QIANKUN__) { // 如果是一个独立运行的应用(不依赖基座 直接访问)
  render() // 直接渲染
}

export async function bootstrap(props) {
  console.log(props)
}
export async function mount(props) {
  root = ReactDOM.createRoot(props.container)
  render()
}
export async function unmount(props) {
  root.unmount()
}

下面来解决以下问题
如果用strictStyleIsolation: true，会用shadowDom的方式进行隔离。以及加上实验性的样式隔离特性experimentalStyleIsolation: true后，后续可能出现dialog等挂载到全局中时，某些同名样式(特别是同框架的情况下，样式名经常冲突)样式冲突。

qiankun 样式隔离

推荐阅读更多精彩内容