Ada*_*iec 7 javascript css font-face shadow-dom icon-fonts
首先我想说我知道这个问题类似于：
如何让导入的css字体/图标对shadow dom中的元素产生影响？
事实并非如此，也没有帮助。
问题：我最近决定使用 ShadowDOM 来封装我的项目中的样式。一开始我认为它按预期工作，但我注意到一些来自外部 CSS 文件的图标消失了。重要的是要注意，这些样式是外部的，并且进行更改的可能性是有限的。
我已经准备了代码来演示该问题（请参阅下面的代码片段）。
一切似乎都工作正常，除了 @font-face
正如您所看到的，包含带图标的外部 CSS 文件的 HTML 在 ShadowDOM 之外按预期工作。我也想在 ShadowDOM 中使用它。
我怎样才能做到这一点？
注意：如果您检查开发工具，网络选项卡中的 CSS 路径存在问题，但这是 SO 片段问题。如果您在本地运行该代码片段，则网络中一切正常。
const body = document.getElementsByTagName('body')[0];
const wrapper = document.querySelector('.wrapper')
const handleAddToShadowClick = (param) => {
const host = document.querySelector('#shadowHost');
if(param === 'insideShadow') {
const shadowRoot = host.attachShadow({mode: 'open'});
shadowRoot.innerHTML = firstComponent
} else {
const shadowRoot = host;
wrapper !== null ? body.removeChild(wrapper): ''
shadowRoot.innerHTML = firstComponent
}
}
const firstComponent = `
<div class="wrapper">
<div class="icon login">Bla bla</div>
<div style="font-family: testFont;">Sample String od text</div>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
</div>
`.wrapper {
font-family: agGridBalham;
background-color: aquamarine;
color: black;
}
.balham:before {
content: "\F11F";
}
.login::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Refresh the page after each button click
</p>
<button onclick="handleAddToShadowClick('outside')">Add outside shadow</button>
<button onclick="handleAddToShadowClick('insideShadow')">Add inside shadow</button>
<div>
<div id="shadowHost"> </div>
</div>
<script src="./script.js"></script>
</body>
</html>问题中提到的行为是 chromium 中存在的一个错误（Gecko 中也存在该错误，不确定它是否已修复）。
这是chromium 报告的与此问题相关的错误的链接，但他们仍未解决该问题。目前，我认为这是唯一可行的解决方法。
该问题主要与@font-face 的范围有关。目前，当很棒的字体仅包含在 Shadow DOM 中时，您无法使用它们。因此，为了使用字体，字体 css 必须同时存在于 light DOM 和 Shadow DOM 中。所以你需要在shadow dom和light dom中导入字体css。
这是一个可以解决您问题的工作 Plunker。
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
</head>
<body>
Refresh the page after each button click
</p>
<button onclick="handleAddToShadowClick('outside')">Add outside shadow</button>
<button onclick="handleAddToShadowClick('insideShadow')">Add inside shadow</button>
<div>
<div id="shadowHost"> </div>
</div>
<script src="lib/script.js"></script>
</body>
</html>
正如您在上面的 plunker 中看到的，我们在 light DOM 和 Shadow Dom 中都包含了 font-awesome css。它按预期工作正常。