解决微前端qiankun中子应用(element组件动态加载的元素)样式丢失的问题

项目使用了微前端qiankun，子应用中使用的是element组件库，当有el-select组件的子应用插入父应用的d窗中初看效果是正常的，但是当点击el-select组件时发现组件下拉框中下拉列表样式丢失，后来在主应用中查看源码发现动态加载的el-select下拉列表DOM是动态插入到主应用中，因为在qiankun中应用间的样式是隔离的导致下拉列表没有样式（子应用中有element的所有样式内容，但是点击el-select组件时下拉列表DOM被动态渲染到了主应用中，因为样式隔离，子应用中element的样式对下拉列表DOM不生效），于是重写了document.body.appendChild方法：

let instance = null;

let originFn = document.body.appendChild.bind(document.body)

function render(props = {}) {
    const { container, microWidgetProps } = props;

    redirectPopup(container);

    let base = window.__POWERED_BY_QIANKUN__ ? microWidgetProps.history.getBasePath.split("#")[0] + "/" : "/";
    console.log(microWidgetProps.contextMenu.dirDocid);
    router = new VueRouter({
        base,
        routes: routers,
        mode: "hash",
    });
    console.log(router, "router");
    instance = new Vue({
        router,
        render: (h) => h(App),
    }).$mount(container ? container.querySelector("#app") : "#app");
}

function redirectPopup(container) {

    // 子应用中需要挂载到子应用的d窗的className，用作标记
    const addPopup = 'el-select-dropdown el-popper'
    // const editPopup = 'el-dialog__wrapper story-para-edit-popup'
    const whiteList = [addPopup]

    // 保存原有document.body.appendChild方法
    let originFn = document.body.appendChild.bind(document.body)

    // 重写appendChild方法
    document.body.appendChild = (dom) => {

        // 根据标记，来区分是否用新的挂载方式
        if (whiteList.includes(dom.className)) {
            container.querySelector('#app').appendChild(dom)
        } else {
            originFn(dom)
        }
    }
}

export async function unmount() {
    instance ?.unmount ?.();
    instance = null;
    router = null;
    history ?.destroy ?.();
    document.body.appendChild = originFn;
}

之所以要标记使用和还原document.body.appendChild方法，是因为主应用和子应用中有很多组件都用到了这个方法，比如select，日历组件。不还原这个方法的话，这些组件的样式会受到破坏。