Почему Font Awesome не работает в моем Shadow DOM? - PullRequest
Новая
       74

Почему Font Awesome не работает в моем Shadow DOM?

0 голосов
/ 06 февраля 2019

Font Awesome не работает в моем теневом DOM, поскольку у меня есть следующее, чтобы предотвратить утечку и утечку стилей: 

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

Я могу использовать другиетаблицы стилей, просто вставляя их в свойство :host, но это не работает с Font Awesome, так как он использует относительные пути в своей таблице стилей.

Я нашел этот пост и попробовал его сCSS области видимости, который я реализую, но значки отображаются в виде квадратов, как видно из моего примера .

Ответы [ 2 ]

0 голосов
/ 23 августа 2019

У меня была такая же проблема со StencilJS.После нескольких часов борьбы и ответа от @Intervalia я смог это исправить.

Вы также должны добавить файлы css в light-dom, иначе браузер их не загрузит.Например, достаточно тега ссылки.

Для доступа в пользовательском элементе те же файлы CSS должны быть указаны и в пользовательском элементе (Shadow DOM).Поскольку они уже загружены в Light DOM, они не загружаются во второй раз. 

styleUrls: [
"formate.css",
"/assets/css/icons-font.css",
"/assets/css/icons-glyphs.css"
],
0 голосов
/ 26 марта 2019

Одна вещь, которую я заметил, заключается в том, что если страница не загружает файл CSS, то shadowDOM также не загрузит его.на странице, где он не будет работать в компоненте, так как остальная часть CSS, кажется, правильно применяется к элементам shadowDOM.

В этом примере показана только shadowDOM, пытающаяся загрузить CSS, и это не работает: 

let template = `
<style>
:host {
  display: block;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<header>
  <h1>DreamLine</h1>
  <nav>
    <ul>
      <li><a href="#0">Tour</a></li>
      <li><a href="#0">Blog</a></li>
      <li><a href="#0">Contact</a></li>
      <li><a href="#0">Error</a></li>
      <li><a href="#0"><i class="fa fa-search"></i> Search</a></li>
    </ul>
  </nav>
</header>
`;

class MyEl extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'}).innerHTML = template;
  }
}

customElements.define("blog-header", MyEl);
<i class="fa fa-battery-full" style="font-size: 45px;"></i>
<hr/>
<blog-header></blog-header>
<hr/>

И этот пример показывает, как страница и shadowDOM загружают ее, и она работает: 

let template = `
<style>
:host {
  display: block;
}
</style>
<header>
  <h1>DreamLine</h1>
  <nav>
    <ul>
      <li><a href="#0">Tour</a></li>
      <li><a href="#0">Blog</a></li>
      <li><a href="#0">Contact</a></li>
      <li><a href="#0">Error</a></li>
      <li><a href="#0"><i class="fa fa-search"></i> Search</a></li>
    </ul>
  </nav>
</header>
`;

class MyEl extends HTMLElement {
  connectedCallback() {
    const styles = document.querySelector('link[href*="fontawesome"]');
    this.attachShadow({mode: 'open'}).innerHTML = template;
    if (styles) {
      this.shadowRoot.appendChild(styles.cloneNode());
    }
  }
}

customElements.define("blog-header", MyEl);
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<i class="fa fa-battery-full" style="font-size: 45px;"></i>
<hr/>
<blog-header></blog-header>
<hr/>

Код, который мне нравится использовать, ищет нужный тег <link> в теле, а затем использует клон этого тега внутри shadowDOM.Таким образом, мой компонент не синхронизирован. Да, это может вызвать проблемы , если компонент не ожидал изменений в CSS, но я считаю, что он хорошо работает для моих проектов.

...