10
मैं एक छाया रूट के साथ वेब घटकों को सीख रहा हूं और अगर बाहरी स्टाइलशीट को लोड करना संभव है तो बॉक्स पर कोड के साथ संभव नहीं है? मैं बहुलक या किसी अन्य वेब घटक पुस्तकालय (अभी तक) का उपयोग नहीं कर रहा हूँ। नीचे दिए गए कोड:वेब घटकों में छाया डोम के लिए बाहरी स्टाइलशीट
<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>
अगर मैं शीर्ष मेरे लिंक टैग डाल दिया, पहले स्क्रिप्ट टैग से ऊपर, मैं पूरे वेब आयु शैली, लेकिन नहीं वेब घटक।
यदि मैं इसे div.holla-back के तहत रखता हूं तो यह कुछ भी शैली नहीं है।
आप वेब घटकों के साथ बाहरी स्टाइलशीट का उपयोग कैसे करते हैं?
क्या आप @import का उपयोग करके स्पष्टीकरण दे सकते हैं? –
आप ऐसा कुछ कर सकते हैं: http://jsbin.com/qefoyi/1/edit लेकिन @import का भारी उपयोग बहुत से http अनुरोधों का कारण बन रहा है और वास्तव में आपके पृष्ठ को धीमा कर रहा है। अनुशंसित दृष्टिकोण शैली तत्वों का उपयोग पहले से ही उनके अंदर अपने सभी मार्कअप के साथ करना है। – robdodson
मुझे लगता है कि आपका क्या मतलब है। यह बदसूरत है लेकिन मैं जो चाहता था उसे प्राप्त करता हूं, हालांकि आप सही हैं कि इसमें बहुत सारे अनुरोध जोड़े गए हैं। –