基座开启沙箱strictStyleIsolation或者experimentalStyleIsolation后，子应用的dialog在基座body中的样式丢失问题

[gansong99]

问题描述：

基座开启沙箱后，子应用挂载在基座body中的el-dialog样式会丢失，目前重写了子应用的 document.body.appendChild，让dialog挂载到子应用的节点中。
现在的问题是我的项目中有保活多个子应用的需求，重写后的appendChild会导致其他子应用也挂载到重写的那个子应用中，导致其他子应用出现dialog消失的问题

关键代码:

let revocable = null; // document.body.appendChild代理对象
const originFn = document.body.appendChild.bind(document.body); // 储存appendChild方法，在卸载子应用时还原appendChild

// 在mount中调用proxy(props),重写appendChild
const proxy = ({ container }) => {
  console.log(document.body.appendChild);
  if (document.body.appendChild.__isProxy__) return;
  revocable = Proxy.revocable(document.body.appendChild, {
    apply(target, thisArg, [node]) {
      if (container) {
        container.appendChild(node);
      } else {
        target.call(thisArg, node);
      }
    }
  });
  if (revocable.proxy) {
    document.body.appendChild = revocable.proxy;
  }
  document.body.appendChild.__isProxy__ = true;
}; 

环境

• qiankun 版本: ^2.10.2
• vue 版本: ^2.6.0
• element-ui 版本: ^2.15.8

[buslightyear]

+1

[kuitos]

开启样式隔离后，样式就会只写到子应用自己的 scope 下，这个就是样式隔离的特性。这种情况下也需要组件库一起配合，比如 antd 下通过 ConfigProvider getPopupContainer 指定弹框渲染的范围

[layla505]

你好 这个问题解决了吗

[is-cool]

你好 这个问题解决了吗
默认弹窗范围document.body，按照上面的方法修改一下就解决了。