LitElement ShadowDOM 中的 GoogleFont

Question

我正在 LitELement 中使用 ShadowDOM 创建一个组件，我想在其中显示 GoogleFonts 的 Material Symbols Outlined 中的图标。

在index.html中，我使用这个网址：

https://fonts.googleapis.com/css2?family=Material+Symbols+Outline

作为常规 CSS 链接：

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>

当我放下类似的东西时它工作得很好

<span class="material-symbols-outlined">
  search
</span>

直接在index.html中。但是当我将它移动到 ShadowDOM 组件中时，它不起作用。因此，假设 index.html

<link>

必须保留在 index.html 中才能提供

@font-face

，我尝试将样式表注入到 ShadowDOM 中以提供类声明 (

.material-symbols-outlined

) - 分三步方法：

1. 通过CSS导入：

   @customElement('my-comp')
   export class MyComponent extends LitElement {
     static styles = [
       css`
         @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");
       `
     ];
   
     render() {
       return html`
         <span class="material-symbols-outlined">search</span>
       `;
     }
   }
   

2. 通过渲染中的链接：

   @customElement('my-comp')
   export class MyComponent extends LitElement {
     render() {
       const iconsCssLink = html`
         <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
       `;
   
       return html`
         ${iconsCssLink}
         <span class="material-symbols-outlined">search</span>
       `;
     }
   }
   

3. 通过仅包含样式的共享组件：

    @customElement('icon-styles')
    export class IconStylesComponent extends LitElement {
      static styles = [
        css`
          @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");
        `
      ];
    }
   

   然后用ShadowDOM导入到目标组件中：

   @customElement('my-comp')
   export class MyComponent extends LitElement {
     static styles = [
       IconStylesComponent.styles,
     ];
   
     render() {
       return html`
         <span class="material-symbols-outlined">search</span>
       `;
     }
   }
   

这些方法都不起作用。我缺少哪一块拼图？

Answer 1

只需使用

@conectate/ct-icon

npm i @conectate/ct-icon

使用方法

import { LitElement, html, css } from 'lit';
import '@conectate/ct-icon'

@customElement('Untitled-1')
export class UNtitled1 extends LitElement {
    static styles = [
        css`
            :host {
                display: block;
            }
        `
    ];

    render() {
        return html`<ct-icon icon="account"></ct-icon>`;
    }
}