Zewnętrzne arkusze stylów dla shadow house w komponentach sieciowych

Question

Uczę się komponentów internetowych z shadow root i nie mogę znaleźć w Google, czy ładowanie zewnętrznych arkuszy stylów jest możliwe za pomocą gotowego kodu? NIE używam polimeru ani żadnej innej biblioteki komponentów internetowych (jeszcze). Kod poniżej:

<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> 

Jeśli umieściłem mój tag linku u góry, nad pierwszym znacznikiem skryptu, stylizuję całą wiek internetowy, ale nie komponent sieciowy.

Jeśli umieściłem go pod div.holla-back, nic nie jest w stylu.

Jak korzystać z zewnętrznych arkuszy stylów z komponentami sieciowymi?

Answer 1

Tagi linków są nieaktywne w Shadow DOM according to the spec. Można jednak użyć parametru @import, ale ma on własne problemy z wydajnością.

Sposób, w jaki Polymer działa, polega na tym, że patrzy na znaczniki link i używa xhr, aby załadować te style i zastosować je.

edit:

Ludzie pracujący na Cienia DOM są świadomi tych niedociągnięć i że musi być stała. Mamy nadzieję, że w przyszłości będziemy mogli stworzyć system obsługujący zewnętrzne arkusze stylów.

Answer 2

Shadow DOM nie reaguje na tagi linków. Infact, Chrome 41 zgłasza błąd podczas używania tagów linków. Przeanalizowaliśmy to ograniczenie, wprowadzając klasy CSS w czasie kompilacji za pomocą wulkanizacji. Okazało się to bardzo przydatne w oddzielaniu twojego CSS od definicji komponentu.