Externe Stylesheets für Schatten-Dom in Web-Komponenten

Question

Ich lerne Web-Komponenten mit einer Schattenwurzel und kann nicht auf Google finden, wenn das Laden externer Stylesheets mit Out-of-the-Box-Code möglich ist? Ich benutze (noch) kein Polymer oder irgendeine andere Webkomponentenbibliothek. Code unten:

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

Wenn ich bis oben meinen Link-Tag legte, über dem ersten Skript-Tag, Stil, den ich das ganze Web-Alters, nicht aber die Web-Komponente.

Wenn ich es unter div.holla-back setze es style nichts.

Wie verwenden Sie externe Stylesheets mit Webkomponenten?

Answer 1

Link-Tags sind in Shadow DOM according to the spec inert. Sie können jedoch @import verwenden, obwohl das eigene Leistungsprobleme hat.

Die Art und Weise, wie Polymer dies umgeht, ist die link Tags und verwendet xhr, um diese Stile zu laden und anzuwenden.

edit:

Die Leute Schatten im DOM arbeiten kennen dieses Manko und dass es repariert werden muss. Hoffentlich können wir in Zukunft ein System entwickeln, das externe Stylesheets unterstützt.

Answer 2

Shadow-DOM reagiert nicht auf Link-Tags. Tatsächlich verursacht Chrome 41 einen Fehler, wenn Sie Link-Tags verwenden. Wir haben diese Einschränkung umgangen, indem wir die CSS-Klassen zum Zeitpunkt der Erstellung mit vulcanize inliniert haben. Dies erwies sich als sehr nützlich beim Trennen Ihres CSS und der Komponentendefinition.