开启了 strictStyleIsolation: true样式隔离后会导致图标消失
如下:
image.png
原因就是字体图标没有被正确加载到
解决办法:
在afterMount生命周期中查找所有的style,如果里面包含字体样式的引入就插入到主应用的head里面,确保加载字体图标文件
async afterMount(app, global) {
const shadowRoot = document.querySelector(`[data-name="${app.name}"]`)?.shadowRoot
if (shadowRoot) {
shadowRoot.querySelectorAll('style').forEach(stl => {
if (stl.textContent && /\.woff/.test(stl.textContent)) {
// 使用正则匹配所有的 @font-face 规则
const fontFaceMatches = [...stl.textContent.matchAll(/@font-face\s*\{([^}]+)\}/g)]
fontFaceMatches.forEach(fontFaceMatch => {
// 提取每个 @font-face 规则中的 font-family 属性
const fontFamilyMatch = fontFaceMatch[0].match(/font-family:(.*?);/)
if (fontFamilyMatch && fontFamilyMatch[1]) {
const fontFamily = fontFamilyMatch[1].replace(/['"\s]/g, '')
const styleContent = fontFaceMatch[0].replace(/(\.\.\/)+/g, entry) // 替换入口路径,
// 检查 head 中是否已存在该 font-family 的 @font-face 样式
const existingStyle = document.head.querySelector(`style[data-font-family="${fontFamily}"]`)
if (!existingStyle) {
// 如果没有找到重复的样式，则插入新的样式
const st = document.createElement('style')
st.innerHTML = styleContent
st.setAttribute('data-font-family', fontFamily) // 为 style 元素添加自定义属性
document.head.appendChild(st)
}
}
})
}
})
}
}
