Я изучаю веб-компоненты с теневым корнем и не могу найти в google, если загрузка внешних таблиц стилей возможна с готовым кодом? Я НЕ использую полимер или любую другую библиотеку веб-компонентов (пока). Код ниже:
<script src="../../libs/jquery-2.1.1.min.js"></script>
<script>
var hollaProto = Object.create(HTMLElement.prototype);
hollaProto.createdCallback = function () {
var shadow = this.createShadowRoot();
var content = document.querySelector('link[rel=import]').import.querySelector("div");
$("button[data-command=holla]", content).on("click", function () { alert("Holla!"); });
shadow.appendChild(content);
};
var hollaWidget = document.registerElement("holla-back", {
prototype: hollaProto
});
</script>
<div class="holla-back">
<button data-command="holla">Holla!</button>
</div>
Если я поместил свою ссылку вверху, над первым тегом script, я создаю весь веб-возраст, но не веб-компонент.
Если я положил его под div.holla-back
, он ничего не создал.
Как вы используете внешние таблицы стилей с веб-компонентами?