如何将导入的样式表应用于自定义元素的模板标签内容？

Question

这是我尝试使用的代码

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

<template id="dropzoneTemplate">
 <div id="dZUpload" class="dropzone">
    <div class="dz-default dz-message"></div>
 </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 stylesheet dropzone.css 没有应用到 template 标签内的内容，即 class dropzone 没有从 dropzone.css 获取它的样式所以导入文件中的样式没有被应用到像里面的 div 这样的元素template 标签。

我也试过把这个 link 标签放在模板标签里面，但是也没用。

是否可以将导入的样式表应用于自定义元素的模板标记内容？

Answer 1

在 <template> 元素中使用 @import css 样式规则：

<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，它也必须包含在主文档中。

如何将导入的样式表应用于自定义元素的模板标签内容？

How to apply imported stylesheet to template tag content for a custom element?

javascript

html

dropzone.js

custom-element

html5-template