Импортировать шрифт awesome в веб-компонент
Это мой компонент заголовка:
<header class = "header">
<div class = "icon-container">
<ul>
<li class = "list-item"><i class = "fa-regular fa-bell"></i></li>
<li class = "list-item"><i class = "fa-solid fa-gear"></i></li>
<li class = "list-item"><i class = "fa-solid fa-arrow-right-from-bracket"></i></li>
</ul>
</div>
</header>Этот код может отображать значки в fontawesome, когда я импортирую font-awesome перед закрывающим тегом body в файле index.html.
<script src = "https://kit.fontawesome.com/my id.js"crossorigin = "anonymous"></script>
Однако теперь я изучил веб-компоненты. Я создал файл header.js для своего заголовка.
const template = document.createElement("template");
template.innerHTML = `
<div class = "icon-container">
<ul>
<li class = "list-item"><i class = "fa-regular fa-bell"></i></li>
<li class = "list-item"><i class = "fa-solid fa-gear"></i></li>
<li class = "list-item"><i class = "fa-solid fa-arrow-right-from-bracket"></i></li>
</ul>
</div>`;
class header extends HTMLElement {
constructor() {
super();
// Create a shadow root
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
window.customElements.define("header-section", header);
Теперь другая часть html все еще отображается, но значок исчезает, так как мне это решить?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку в ваш веб-компонент не загружаются потрясающие шрифты значков, значки не отображаются. Чтобы решить эту проблему, вы можете загрузить шрифт font-awesome в свой веб-компонент, используя тег ссылки в своем шаблоне.
Вот как вы можете изменить свой шаблон:
const template = document.createElement("template");
template.innerHTML = `
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity = "sha512-jkihXtPklFJy8q3rnoEMBstczhBwFwO48lEQ7EDKlA5JX7xu5Q0NVg7lLeK/cHhV7hly0iygDRNyo6N88U6B9g= = " crossorigin = "anonymous" referrerpolicy = "no-referrer" />
<div class = "icon-container">
<ul>
<li class = "list-item"><i class = "fa-regular fa-bell"></i></li>
<li class = "list-item"><i class = "fa-solid fa-gear"></i></li>
<li class = "list-item"><i class = "fa-solid fa-arrow-right-from-bracket"></i></li>
</ul>
</div>`;
для использования в shadowDOM вам необходимо загрузить CSS как в shadowDOM, так и в globalDOM.
Сделайте так, чтобы ваш компонент проверял, существует ли ссылка в globalDOM,
если не; веб-компонент добавляет href
customElements.define('my-fa-element', class extends HTMLElement {
constructor() {
let href = "https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css";
super().attachShadow({mode:'open'})
.innerHTML = `<style>@import url('${href}')</style>`+
[`check`,`square-check`,`circle-check`,`gear`]
.map(icon=>`fa-${icon}: <i class = "fa fa-${icon}"></i><br>`).join("");
if (!document.querySelector(`link[href = "${href}"]`)) {
document.head.append(
Object.assign(document.createElement("link"), {
rel: "stylesheet",
href
}))
};
}
});<my-fa-element></my-fa-element>Вместо того, чтобы назначать CSS через innerHTML тегу style, я бы попытался импортировать таблицу стилей и вставить ее в теневой корень adoptedStyleSheets. Таким образом, вы загружаете CSS только один раз, и для всех экземпляров будет использоваться один объект таблицы стилей. Единственная неприятная вещь в этом — суета вокруг утверждений об импорте в отношении CSP и, как следствие, понижение с этапа 3 до этапа 2.
Да, теперь также должно работать, так как Apple приняла это (наконец) 3 недели назад: caniuse.com/?search=adoptedStyleSheets Так что помните о поддержке браузера
Обратите внимание, что шрифт доступен в теневых корнях; это просто классы CSS, которые там неизвестны.