場(chǎng)景
在基于 qiankun 的微前端架構(gòu)下開發(fā)時(shí)，子應(yīng)用代碼內(nèi)的選擇器全部失效同诫。例如 getElementById() 等方法是獲取不到子應(yīng)用的元素的粤策。而當(dāng)子應(yīng)用有獲取 dom 的需求時(shí)（例如需要使用echarts），就會(huì)遇到這個(gè)問題剩辟。
產(chǎn)生原因
qiankun 微前端框架基于 shadow dom 的形式生成子應(yīng)用掐场，主、子應(yīng)用共用一個(gè) document 贩猎，而 shadow dom 內(nèi)的元素是不被暴露的熊户。
解決方法
思路：在主應(yīng)用內(nèi)找到 shadowRoot 的父元素，利用 .shadowRoot 屬性吭服，創(chuàng)建子應(yīng)用自己的 document
實(shí)現(xiàn)：
// 找到主應(yīng)用中 shadow root 的父元素嚷堡，利用 .shadowRoot 屬性獲取沙箱即可
const microDocument = document.getElementById('父元素ID').firstChild.shadowRoot.
// 在需要使用選擇器時(shí)，使用子應(yīng)用自身的 microDocument 身上的選擇器方法艇棕，就可以成功取到元素了
const myChart = echarts.init(microDocument.getElementById('echarts'))
