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

【问题标题】：How to apply imported stylesheet to template tag content for a custom element?如何将导入的样式表应用于自定义元素的模板标签内容？
【发布时间】：2016-12-20 21:07:22
【问题描述】：

这是我正在尝试使用的代码

<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，因此导入文件中的样式不会应用于 template 标签内的 div 等元素。

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

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

【问题讨论】：

现在

标签： javascript html dropzone.js custom-element html5-template

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

【讨论】：