为什么 Font Awesome 在我的 Shadow DOM 中不起作用? [英] Why doesn't Font Awesome work in my Shadow DOM?

查看：27 发布时间：2021/12/24 11:43:34 css google-chrome-extension font-awesome shadow-dom tailwind-css

本文介绍了为什么 Font Awesome 在我的 Shadow DOM 中不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

第 2 步:准备您的 Web 组件(在本例中为 my-component.tsx).您可以使用 styleUrls 属性导入多个 css 文件.只需从您的资产目录中导入 fontawesome css.

import { Component, Prop, h } from '@stencil/core';@零件({标签:'我的组件'，样式网址:['我的组件.css','../../assets/fontawesome/css/all.css'],阴影:真实})导出类 MyComponent {@Prop() 首先:字符串；使成为() {返回 
<i class="fas fa-question-circle"></i>;}}

步骤 3 准备要在其中使用组件的文件(在本例中为 index.html).重要的一行是链接"标签.这再次包括font awesome css"并强制浏览器真正下载字体.

<html dir="ltr" lang="en"><头><meta charset="utf-8"><title>Stencil Component Starter</title><link rel="stylesheet" type="text/css" href="./assets/fontawesome/css/all.css"><身体><my-component first="Stencil" last="'别叫我框架'JS"></my-component>

我知道这感觉不对并且看起来很奇怪，但是仅在索引 html 或 Web 组件中包含很棒的字体是不够的.它必须真正包含在两个文件中.这并不意味着浏览器会多次加载它——它只会加载一次.

这意味着您无法通过 Web 组件提供字体 - 据我所知.这不是 stenciljs 错误，这是浏览器的普遍问题.如果您有更好的解决方案，请告诉我.

这里只是为了好玩，这是一张屏幕截图，显示当字体仅包含在一个文件中时，浏览器不会加载字体.http://prntscr.com/p2f9tc

<块引用>

2019 年 10 月 5 日更新:

如果你想在你的 web 组件中使用你的字体，上面的解释是正确的，仍然是必要的.但是你也可以在 web 组件中使用 slot 标签.比您自动将字体从外部(html)绕过到 web 组件中.但请注意，它仅适用于您在 Web 组件的标签之间编写的内容.这意味着您可以使用 <i class="你的字体"/></my-component>.在这种情况下，您不必将字体导入 Web 组件.

Font Awesome is not working in my shadow DOM since I have the following in it to prevent styles from leaking in and out:

:host {
    all: initial; /* 1st rule so subsequent properties are reset. */
    display: block;
    contain: content; /* Boom. CSS containment FTW. */
}

I'm able to use other stylesheets by just inlining them within the :host property, but that doesn't work with Font Awesome since it uses relative paths in its stylesheet.

I found this post and tried it with the scoped CSS I implement, but the icons show as squares, as can be seen in my example.

解决方案

I had the same issue with StencilJS. After hours of struggle and the answer from @Intervalia I was able to fix it.

The problem is that the browser doesn't load the font files when they are only included in the shadow dom (your custom web component). This means that the fonts also has to be included in the normal html file (aka light DOM) so that the browser can detect and load them in order to make them available in the shadow dom.

In my case I didn't use Font awesome instead it was a custom font but I tried it a second time with font awesome and a clean Stenciljs project. The solution is always the same doesn't matter which custom font you need.

Step 1: Move the font into your project. I created a seperate "assets" folder inside the "src" folder to have access from all the components. In this example I downloaded font awesome for web environment https://fontawesome.com/download. (I wouldn't recommend "npm install" since you have to use it in the index.html too)

Step 2: Prepare your web component (in this case my-component.tsx). You can import multiple css files using the styleUrls property. Just import the fontawesome css from your assets directory.

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>;
  }
}

Step 3 prepare the file where you want to use the component (in this case index.html). The important line is the "link" tag. This includes the "font awesome css" again and force the Browser to really download the fonts.

<!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>

I know it feels wrong and looks weird but it is not enough to include font awesome only in the index html or in the web component. It must really be included in both files. That doesn't mean the Browser will load it multiple times - it will only be loaded once.

That means that you can't deliver the font with the web component - as far as i know. This isn't a stenciljs bug this is a general problem of the browsers. Please let me know if you have better solutions.

Just for fun here is a screenshot that shows that the browser doesn't load the fonts when it is only included in one file. http://prntscr.com/p2f9tc

Update 05.10.2019:

If you want to use your font inside your web-component the explanation above is correct and still necessary. But you can also use the slot tag inside the web-component. Than you automatically bypass the font from outside (the html) into the web-component. But notice it only works for the stuff you write between the tags of your web component. That means you can use <my-component> <i class="your-font"/> </my-component>. In this case you don't have to import the font into the web components.

这篇关于为什么 Font Awesome 在我的 Shadow DOM 中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

为什么 Font Awesome 在我的 Shadow DOM 中不起作用? [英] Why doesn't Font Awesome work in my Shadow DOM?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

为什么 Font Awesome 在我的 Shadow DOM 中不起作用? [英] Why doesn&#39;t Font Awesome work in my Shadow DOM?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

为什么 Font Awesome 在我的 Shadow DOM 中不起作用? [英] Why doesn't Font Awesome work in my Shadow DOM?

登录关闭