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(
    
      
    
  )
}


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 样式隔离)