qiankun 子应用选择器失效问题

场景

在基于 qiankun 的微前端架构下开发时，子应用代码内的选择器全部失效。例如 getElementById() 等方法是获取不到子应用的元素的。而当子应用有获取 dom 的需求时（例如需要使用echarts），就会遇到这个问题。

产生原因

qiankun 微前端框架基于 shadow dom 的形式生成子应用，主、子应用共用一个 document ，而 shadow dom 内的元素是不被暴露的。

解决方法

思路：在主应用内找到 shadowRoot 的父元素，利用 .shadowRoot 属性，创建子应用自己的 document

实现：

// 找到主应用中 shadow root 的父元素，利用 .shadowRoot 属性获取沙箱即可
const microDocument = document.getElementById('父元素ID').firstChild.shadowRoot.

// 在需要使用选择器时，使用子应用自身的 microDocument 身上的选择器方法，就可以成功取到元素了
const myChart = echarts.init(microDocument.getElementById('echarts'))