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'))
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容