场景
在基于 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'))