美文网首页
qiankun 样式隔离

qiankun 样式隔离

作者: TouchMe丶 | 来源:发表于2022-09-11 16:55 被阅读0次

    如果用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 样式隔离

          本文链接:https://www.haomeiwen.com/subject/aoffortx.html