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

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标记中的内容，即类下拉区域没有从dropzone.css获取其样式，因此导入文件中的样式没有应用到template标记中的div之类的元素中。

我也尝试将这个链接标签放入模板标签中，但这也不起作用。

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

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规范，除@charset之外，@import规则必须先于任何其他规则。
• 如果样式表定义了一个@font-face，那么它也必须包含在主文档中。