1

这是我尝试使用的代码

<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没有从dropzone.css获取它的样式，所以导入文件中的样式没有被应用到标签div内的元素。template

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

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

4

1 回答 1

2

在元素中使用@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 规范，@import规则必须在除@charset.

  • 如果您的样式表定义了 a @font-face，它也必须包含在主文档中。

于 2016-08-16T07:19:43.193 回答