首先我想说我知道这个问题类似于：
如何让导入的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 = …假设我想使用阴影dom创建自定义元素.模板中的某些元素具有在链接的css文件中指定的类名.现在我想让css规则对元素产生影响.但由于影子dom风格的边界,我无法实现.
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<template id="blog-header">
<header>
<h1>DreamLine</h1>
<nav>
<ul>
<li><a href="#0">Tour</a></li>
<li><a href="#0">Blog</a></li>
<li><a href="#0">Contact</a></li>
<li><a href="#0">Error</a></li>
<li><a href="#0"><i class="fa fa-search"></i>Search</a></li>
</ul>
</nav>
</header>
</template>
<script type="text/javascript">
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function () {
var t = importDoc.querySelector("#blog-header");
var clone = document.importNode(t.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
document.registerElement("blog-header", {
prototype: proto
});
</script>你看,fa-search是一个在font-awesome css文件中定义的类,我该如何设置<i>元素的样式？
javascript web-component shadow-dom html5-template custom-element