如何將導入的樣式表應用於自定義元素的模板標籤內容？

Question

下面是代碼我想使用

<script type="text/javascript" src="dropzone.js"></script> 
 
<link href="dropzone.css" rel="stylesheet"/> 
 

 
<template id="dropzoneTemplate"> 
 
\t <div id="dZUpload" class="dropzone"> 
 
\t \t <div class="dz-default dz-message"></div> 
 
\t </div> 
 
</template> 
 
<dropzone></dropzone> 
 

 
<script> 
 
    var DropzoneElementPrototype = Object.create(HTMLElement.prototype); 
 

 
    DropzoneElementPrototype.createdCallback = function() { 
 
     var t = document.querySelector('#uploadImageTemplate'); 
 
     var clone = document.importNode(t.content, true); 
 
     this.createShadowRoot().appendChild(clone); 
 
    }; 
 

 
    var DropzoneElement = document.registerElement('dropzone', { 
 
     prototype: DropzoneElementPrototype 
 
    }); 
 

 
</script>

但imported stylesheetdropzone.css不獲取應用到裏面的內容template標籤，即類懸浮窗不從dropzone.css獲取它的樣式，因此導入文件中的樣式不適用於div中的元素template 標籤。

我也試圖把這個鏈接標籤放在模板標籤內，但是這也不起作用。

是否可以將導入的樣式表應用於自定義元素的模板標籤內容？

Answer 1

使用一個@import css樣式規則的<template>的元素：

<template id="dropzoneTemplate"> 
    <style> 
     @import url('dropzone.css') 
    </style> 
    <div id="dZUpload" class="dropzone"> 
      <div class="dz-default dz-message"></div> 
    </div> 
</template> 

注：

• 按照CSS2 specification，@import規則必須先除@charset任何其他規則。

• 如果您的樣式表定義了@font-face，它也必須包含在主文檔中。