Stilleri web bileşenine içe aktarma

Question

Stilleri web bileşenine içe aktarmanın standart yolu nedir?

<template> 
    <link rel="style" href="foo.css" /> 
    <h1>foo</h1> 
</template> 

aşağıdaki kullanarak bu kullanarak gölge DOM ekleme ediyorum:

şu bana bir hata HTML element <link> is ignored in shadow tree verir

var importDoc, navBarProto; 

importDoc = document.currentScript.ownerDocument; 

navBarProto = Object.create(HTMLElement.prototype); 
navBarProto.createdCallback = function() { 
    var template, templateClone, shadow; 

    template = importDoc.querySelector('template'); 
    templateClone = document.importNode(template.content, true); 

    shadow = this.createShadowRoot(); 
    shadow.appendChild(templateClone); 
}; 

document.registerElement('my-nav-bar', { 
    prototype: navBarProto 
}); 

Answer 1

Artık gölge dom içinde <link> etiketi desteklenmektedir.

Bir doğrudan kullanabilirsiniz:

<link rel="stylesheet" href="yourcss1.css"> 
<link href="yourcss2.css" rel="stylesheet" type="text/css"> 

Hem whatwg ve W3C tarafından onaylandı.Gölge dom içinde css kullanmak için

Faydalı linkler:

• https://w3c.github.io/webcomponents/spec/shadow/#inertness-of-html-elements-in-a-shadow-tree
• https://github.com/whatwg/html/commit/43c57866c2bbc20dc0deb15a721a28cbaad2140c
• https://github.com/w3c/webcomponents/issues/628

Doğrudan css bağlantı gölge dom kullanılabilir.

Answer 2

NB !!! https://stackoverflow.com/a/48202206/2035262

göre Polymer documentation için:

BU CEVAP

Yukarı güncel cevap aşağıda Himanshu Sharma TARAFINDAN CEVAP KONTROL EDİNİZ ESKİ OLDUĞU

Polimer, Shadow DOM tarafından doğal olarak desteklenmeyen özelliklerine sahip <polymer-element> tanımlarınızda stil sayfalarını eklemenize izin verir.

Bu biraz garip bir referanstır ama düz bir google olamazdı. Şu anda şablonların içindeki bağlantıları destekleme konusunda söylentiler olmadığı anlaşılıyor. Eğer vanilya web bileşeni kullanmak isteyip dedi

, sen <style> etiketi veya yük ile css satır içi ve javascript elle css uygulamalıdır ya.

Answer 3

<template> iç <style> elemanı deneyin: <template> etiketinin içine harici stil yerleştirmek gerekirse

<style> @import "../my/path/style.css"; </style> 

deneyebilirsiniz

<template> 
    <style> 
     h1 { 
     color: red; 
     font-family: sans-serif; 
     } 
    </style> 
    <h1>foo</h1> 
</template>