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.csstemplateはタグ内のコンテンツに適用されません。つまり、クラス dropzoneはdropzone.cssdivからスタイルを取得しないため、インポートされたファイルのスタイルはタグ内のような要素に適用されません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 仕様によると、@importrule は、 を除く他のすべての規則よりも前になければなりません@charset。

  • スタイルシートで が定義されている場合@font-faceは、メイン ドキュメントにも含める必要があります。

于 2016-08-16T07:19:43.193 に答える