Как использовать иконки материалов дизайна в веб-компоненте? - PullRequest
Новая
       26

Как использовать иконки материалов дизайна в веб-компоненте?

1 голос
/ 03 марта 2020

Похоже, что mdi не работает внутри веб-компонентов, или я что-то пропустил?

Я хочу разработать веб-компонент, который инкапсулирует его зависимости, добавление ссылки на родительский документ работает, но это нарушает исходное намерение. 

<html>
<body>
<x-webcomponent></x-webcomponent>
<script>
customElements.define(
  "x-webcomponent",
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = `
        <style>@import url('https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css');</style>
        <span class="mdi mdi-home"></span>
      `;
    }
  }
);
</script>
</body>
</html>

https://codepen.io/Jamesgt/pen/MWwvJaw

1 Ответ

1 голос
/ 04 марта 2020

Правило @font-face CSS для шрифта, который вы хотите использовать, должно быть объявлено в основном документе, а не в Shadow DOM.

Поскольку в вашем случае оно определено в * Файл 1004 * materialdesignicons.min. css необходимо загрузить в основной документ через глобальный <link>.

. Обратите внимание, что файл CSS не будет загружен. дважды благодаря кешу браузера.

Кроме того, вы можете добавить его в облегченном DOM веб-компонента или просто объявить правило @font-face (скопировано из materialdesignicons. css file).

Вот пример работы: 

customElements.define( "x-webcomponent", class extends HTMLElement {
    constructor() {
      super()
      this.attachShadow({ mode: "open" })
      this.shadowRoot.innerHTML = `
        <link rel=stylesheet  href=https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css>
        <span class="mdi mdi-home"></span>`
    }
    connectedCallback () {
      this.innerHTML = `<style>
          @font-face {
            font-family: "Material Design Icons";
            src: url("https://cdn.materialdesignicons.com/4.9.95/fonts/materialdesignicons-webfont.woff?v=4.9.95") format("woff");
          }
       </style>`
    }
} )
<x-webcomponent></x-webcomponent>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...