Как применить импортированную таблицу стилей к содержимому тега шаблона для пользовательского элемента?

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 не получение его стилей от 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, она также должна быть включена в основной документ.