Я использую LitElement и пытаюсь загрузить шрифт Google на уровне элемента.
Я попытался вернуть его в виде HTML-литерала в событии connectedCallback, но это не сработало. У меня не получилось сделать это в get styles() методе.
Где в коде следует разместить оператор <link...>?
Вы можете легко импортировать шрифт Google в index.html:
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">
или вы можете создать общий файл style.js и включить его:
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<style>
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
html,
body {
font-family: 'Roboto', Arial, sans-serif;
height: 100%;
margin: 0;
}
...
</style>`;
document.head.appendChild($_documentContainer.content);
var importDoc = window.document;
var style = importDoc.querySelector('style');
document.head.appendChild(style);
or:
class MyElement extends LitElement {
render() {
return html`
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
`;
}
}
демо (См. Красный тег, когда я импортировал Kaushan+Script)
Вы можете импортировать внешнюю таблицу стилей, добавив элемент <link> в свой шаблон. Подробнее см. Импортировать внешнюю таблицу стилей.
Я постарался продемонстрировать все требования, которые вы просили. Вот мой обходной путь.
