Javascript 如何让导入的css字体/图标对阴影dom中的元素产生影响？

假设我想使用shadowdom创建一个自定义元素。模板中的某些元素在链接的css文件中指定了类名。现在我想让css规则对元素产生影响。但由于阴影dom样式的边界，我无法实现这一点

梦幻线







var importDoc=document.currentScript.ownerDocument；
var proto=Object.create（HTMLElement.prototype{
createdCallback：{
值：函数（）{
var t=importDoc.querySelector（#blog header”）；
var clone=document.importNode（t.content，true）；
this.createShadowRoot（）.appendChild（克隆）；
}
}
});
document.registerElement（“博客标题”{
原型：原型
});

要在阴影DOM中使用导入的字体（例如FontAwesome），您应该：

1°声明字体

首先，在主文档中包含

元素。它将声明一个

@font-face

CSS规则，使该字体可用于文档中的所有文本

2°导入样式表

然后，使用

节点中的

@import url

CSS规则导入相同的文件，以使

.fa-*

类选择器可从阴影DOM中使用：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<template id="blog-header">
  <style>
    @import url("https://use.fontawesome.com/releases/v5.7.1/css/all.css")
  </style>
  <header>
    <h1>DreamLine</h1>
    //...
  </header>
</template>

/*
@字体{
字体系列：“FontAwesome”；
src:url（“https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome-webfont.woff2?v=4.5.0）格式（'woff2'）；
}
*/

@导入url（“https://use.fontawesome.com/releases/v5.7.1/css/all.css")
梦幻线

我导入了一个带有mdi图标的示例项目，作为子模块导入到一个更大的项目中。我的示例项目在带有dom to image包的较大项目中下载地图图像时，在传单地图中使用了mdi图标，而这些图标在下载地图图像时并没有得到。 我必须将其添加到vue文件中才能使其正常工作，方法如下：

 <template>
  <div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.6.55/css/materialdesignicons.min.css" crossorigin="anonymous">