从 shadowDOM 内部加载 link 时不加载外部字体

Question

一开始我想说我知道这个问题类似于：

事实并非如此，也无济于事。

问题：我最近决定使用 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>

Answer 1

问题中提到的行为是一个在 chromium 中存在的错误（在 Gecko 中也存在，但不确定是否已经修复）。

Here is the link for the bug reported at chromium related to this issue, which still not resolved by them. At, present i feel this is the only workaround which will work.

这个问题主要与@font-face 的范围有关。当前，当字体仅包含在阴影 DOM 中时，您无法使用字体 awesome fonts。所以为了使用字体，字体 css 必须存在于光 DOM 和阴影 DOM 中。所以你需要在阴影 dom 和灯光 dom.

中导入字体 css

这里有一个 Working 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>

如您所见，我们在灯光 DOM 和阴影 Dom 中都包含了很棒的字体 css。它按预期工作正常。

从 shadowDOM 内部加载 link 时不加载外部字体

External font does not load when link is loaded from inside the shadowDOM

javascript

css

font-face

shadow-dom

icon-fonts