将网络字体与 Polymer 自定义元素一起使用

Question

我在将 Typekit 字体加载到 Polymer 组件时遇到问题。

我最初在 my-element.js 中的内容：

import {html, PolymerElement} from "../node_modules/@polymer/polymer/polymer-element.js";

export class MyElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        @import url(https://use.typekit.net/mykit.css)
        .my-class { font-family: "typekit-font-family"; }
      </style>

      <div class$="my-class">
        <slot/>
      </div>
    `;
  }
}

window.customElements.define("my-element", MyElement);

我了解到 @import url() 不是一个好方法，所以我将其替换为 polymerelements/paper-styles 导入 Roboto 的方式：

typekit-loader.js:

// Based on https://github.com/PolymerElements/font-roboto/blob/master/roboto.js
// and https://github.com/PolymerElements/paper-styles

export {}; // ensure this file can only be parsed as a module.

// Give the user the choice to opt out of font loading.
if (!window.polymerSkipLoadingFontRoboto) {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.crossOrigin = "anonymous";
  link.href = "https://use.typekit.net/mykit.css";
  document.head.appendChild(link);
}

my-element.js:

import {html, PolymerElement} from "../node_modules/@polymer/polymer/polymer-element.js";
import "./typekit-loader.js";


export class MyElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        .my-class { font-family: "typekit-font-family"; }
      </style>

      <div class$="my-class">
        <slot/>
      </div>
    `;
  }
}

window.customElements.define("my-element", MyElement);

typekit-loader.js 本质上最终做的是将 <link rel="stylesheet" /> 标记添加到链接到并使用 my-element.js 的文档的 <head>。这似乎有效，因为我可以看到正在使用我的 typekit 字体。

但我的问题是它为什么有效？ Shadow DOM 不应该访问主机页面自己的样式，那么我的 div 如何获得自定义字体？链接到网络字体与链接到文档 <head> 中的任何随机 css 文件有何不同？如果我在主机文档中添加了一个样式规则，说明 .my-class 应该是红色的，它不适用。

Answer 1

阴影 DOM 将仅隔离用户定义的 CSS 样式。

默认 CSS 样式 - CSS 样式应用于每个新文档 - 将应用样式。例如：背景、文字颜色、填充...

默认的CSSbackground-color是inherit。因此，如果您将其全局定义为 blue，那么即使在阴影 DOM.

中，它也会显示 blue

字体也是如此：全局定义或加载的字体在ShadowDOM中继承，可以在Shadow中显示。

将网络字体与 Polymer 自定义元素一起使用

Using web fonts with Polymer custom elements

polymer

shadow-dom

custom-element

typekit