Font Awesome在我的 shadow DOM 中不起作用，因为我在其中包含以下内容以防止样式泄漏和泄漏：
:host {
all: initial; /* 1st rule so subsequent properties are reset. */
display: block;
contain: content; /* Boom. CSS containment FTW. */
}
我可以通过在:host属性中内联它们来使用其他样式表，但这不适用于 Font Awesome，因为它在其样式表中使用相对路径。
我对 StencilJS 也有同样的问题。经过数小时的努力和@Intervalia 的回答，我得以修复它。
问题在于，当字体文件仅包含在 shadow dom（您的自定义 Web 组件）中时，浏览器不会加载它们。这意味着字体也必须包含在普通的 html 文件（又名 light DOM）中，以便浏览器可以检测并加载它们，以便使它们在 shadow dom 中可用。
就我而言，我没有使用 Font awesome 而是一个自定义字体，但我第二次尝试使用 font awesome 和一个干净的 Stenciljs 项目。无论您需要哪种自定义字体，解决方案总是相同的。
第 1 步：将字体移动到您的项目中。我在“src”文件夹中创建了一个单独的“assets”文件夹，以访问所有组件。在此示例中，我为 Web 环境https://fontawesome.com/download下载了很棒的字体。（我不推荐“npm install”，因为你也必须在 index.html 中使用它）
第 2 步：准备您的 Web 组件（在本例中为 my-component.tsx）。您可以使用 styleUrl的属性导入多个 css 文件。只需从您的资产目录中导入 fontawesome css。
import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrls: [
'my-component.css',
'../../assets/fontawesome/css/all.css'
],
shadow: true
})
export class MyComponent {
@Prop() first: string;
render() {
return <div> <i class="fas fa-question-circle"></i> </div>;
}
}
第 3 步准备要在其中使用组件的文件（在本例中为 index.html）。重要的一行是“链接”标签。这再次包括“font awesome css”并强制浏览器真正下载字体。
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Stencil Component Starter</title>
<link rel="stylesheet" type="text/css" href="./assets/fontawesome/css/all.css">
</head>
<body>
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
</body>
</html>
我知道这感觉不对，看起来很奇怪，但仅在 index html 或 Web 组件中包含 font awesome 是不够的。它必须真正包含在两个文件中。这并不意味着浏览器会多次加载它——它只会被加载一次。
这意味着您无法使用 Web 组件提供字体 - 据我所知。这不是 stenciljs 错误，这是浏览器的普遍问题。如果您有更好的解决方案，请告诉我。
只是为了好玩，这里是一个屏幕截图，显示当字体仅包含在一个文件中时浏览器不会加载字体。http://prntscr.com/p2f9tc
2019 年 10 月 5 日更新：
如果你想在你的 web 组件中使用你的字体，上面的解释是正确的并且仍然是必要的。但是你也可以在 web-component 中使用 slot 标签。比您自动将字体从外部（html）绕过到网络组件中。但请注意，它仅适用于您在 Web 组件标签之间编写的内容。这意味着您可以使用<my-component> <i class="your-font"/> </my-component>. 在这种情况下，您不必将字体导入 Web 组件。
我注意到的一件事是，如果页面没有加载 CSS 文件，那么 shadowDOM 也不会加载它。
我真的认为我们唯一的问题是，如果页面上没有定义字体，它将无法在组件中工作，因为其余的 CSS 似乎正确地应用于 shadowDOM 元素。
此示例仅显示 shadowDOM 尝试加载 CSS，但它不起作用：
let template = `
<style>
:host {
display: block;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<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>
`;
class MyEl extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'}).innerHTML = template;
}
}
customElements.define("blog-header", MyEl);<i class="fa fa-battery-full" style="font-size: 45px;"></i>
<hr/>
<blog-header></blog-header>
<hr/>这个例子显示了页面和 shadowDOM 加载它并且它工作：
let template = `
<style>
:host {
display: block;
}
</style>
<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>
`;
class MyEl extends HTMLElement {
connectedCallback() {
const styles = document.querySelector('link[href*="fontawesome"]');
this.attachShadow({mode: 'open'}).innerHTML = template;
if (styles) {
this.shadowRoot.appendChild(styles.cloneNode());
}
}
}
customElements.define("blog-header", MyEl);<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<i class="fa fa-battery-full" style="font-size: 45px;"></i>
<hr/>
<blog-header></blog-header>
<hr/>我喜欢使用的<link>代码在正文中查找我想要的标记，然后在 shadowDOM 中使用该标记的克隆。这样我的组件就不会不同步。是的，如果组件不期望 CSS 发生变化，这可能会导致问题，但我发现它适用于我的项目。
我想分享我为将 Font Awesome 图标加载到我的模板组件（启用阴影）所做的事情......
在研究了这个主题几个小时后，我想我发现了一个解决方案，它可以最有效地以不可知的方式捆绑我的组件，并且无需在 HTML 标头中包含任何额外的样式表。
我的解决方案是使用stencil-inline-svg模块，然后直接从 Font Awesome 模块导入 svg 文件，如下所示：
// the reference to the svg can be anything (searchIcon name).
// just make sure to import the correct svg from fontawesome node modules.
import searchIcon from 'fontawesome/svgs/regular/search.svg';
@Component({
tag: 'search-icon',
styleUrl: 'search-icon.scss',
shadow: true,
})
export class SearchIconComponent {
render(){
return (
{/* Not ideal to use innerHTML but this renders the full SVG markup */}
<span class="search-btn" innerHTML={searchIcon}></span>
)
}
}
现在，我可以设置 css 规则来修改图标的颜色和大小，如下所示
.search-btn {
width: 40px; // Set SVG size at the parent.
svg path {
fill: #fff; // Update svg path color.
}
}
显然，这需要一点 Font Awesome 图标知识，以便您知道要导入哪些图标。
如果您不需要 shadow: true 那么您可以直接通过 index.html 或主应用程序加载 all.min.css。即使加载 all.min.js 文件也可以。
如果您需要在 shadow dom 中使用它，那么您需要在 index.html 中加载 all.min.css，并使用类似这样的方法在 shadow root 中加载它。
`
componentDidLoad(): void {
this.hostElement.shadowRoot
.getElementById("some_Id")
.insertAdjacentHTML(
"afterbegin",
`<link rel="stylesheet" href="${getAssetPath(
"/fontAssets/fontawesome-free/css/all.min.css"
)}" />`
);
}
`
FWIW 我创建了一个辅助方法来在父页面级别为 font-awesome 创建一个链接。不确定这是否违反任何custom-elements/Web Components标准，但我会继续在这里发布，希望我能得到纠正:) 虽然它现在适用于我的带有内部 Web 应用程序的用例。
export const addFontAwesomeStyles = () => {
injectStylesheet("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
injectStylesheet("https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css");
}
export const injectStylesheet = (href: string) => {
const links = document.head.querySelectorAll("link");
// Already been injected
for(let l in links)
if(links[l].href == href) return;
const link = document.createElement('link');
link.rel = "stylesheet";
link.href = href;
document.head.appendChild(link)
}
然后在您的 StencilJS 组件的构造器中，您可以像这样使用它：
//...
constructor() {
addFontAwesomeStyles();
}
Shadow Doms 的风格是有范围的。而且不影响外型