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

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等元素。

我还尝试将此链接标记放在模板标记中，但这也不起作用。

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