35.1qiankun 子应用选择器失效问题

最新推荐文章于 2024-08-08 18:09:33 发布

越努力，越幸运..........

最新推荐文章于 2024-08-08 18:09:33 发布

阅读量1.2k

点赞数

分类专栏： js继承文章标签： echarts html javascript

本文链接：https://blog.csdn.net/weixin_47254130/article/details/120544757

版权

js继承专栏收录该内容

18 篇文章 0 订阅

订阅专栏

场景

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