Использование веб-шрифтов с пользовательскими элементами Polymer - PullRequest
Новая
       32

Использование веб-шрифтов с пользовательскими элементами Polymer

0 голосов
/ 12 ноября 2018

У меня были проблемы с загрузкой шрифтов 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" /> к <head> документа, который ссылается и использует my-element.js. Кажется, это работает, поскольку я вижу, как используются мои шрифты typekit.

Но мой вопрос: почему это работает? Shadow DOM не должен иметь доступа к собственным стилям главной страницы, так как мой div получает собственный шрифт? Чем связь с веб-шрифтом отличается от ссылки на любой случайный файл CSS в <head> документа? Если я добавлю правило стиля в хост-документ, говоря, что .my-class должно быть красным, это не применяется.

1 Ответ

0 голосов
/ 14 ноября 2018

Shadow DOM будет изолировать только определенные пользователем стили CSS.

Стили CSS по умолчанию - стили CSS, применяемые к каждому новому документу - будут применены к стилю. Например: фон, цвет текста, отступы ...

CSS по умолчанию background-color - inherit. Поэтому, если вы определите его глобально как blue, тогда оно будет отображаться blue даже внутри Shadow DOM.

То же самое и со шрифтами: шрифт, определенный или загруженный глобально, наследуется в Shadow DOM и может отображаться в нем.

...