Как применить импортированную таблицу стилей к содержимому тега шаблона для пользовательского элемента?

Вот код, который я пытаюсь использовать

<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.

Я также пытался поместить этот тег ссылки в тег шаблона, но это тоже не работает.

Можно ли применить импортированную таблицу стилей к содержимому тега шаблона для пользовательского элемента?


javascript html custom-element dropzone.js html5-template
person gurvinder372    schedule 14.08.2016    source источник
comment
Ваша проблема не ясна, попробуйте объяснить больше   -  person Omar Faruque    schedule 14.08.2016
comment
@OmarFaruque добавил больше деталей, дайте мне знать, если все еще не ясно.   -  person gurvinder372    schedule 14.08.2016
comment
И ‹link›, и @import теперь поддерживаются внутри элементов ‹template› для применения стилей области действия.   -  person Neil    schedule 08.06.2018

Ответы (1)


arrow_upward
2
arrow_downward

Используйте правило стиля @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.

  • Если ваша таблица стилей определяет @font-face, она также должна быть включена в основной документ.

person Supersharp    schedule 16.08.2016
comment
Спасибо, попробуем - person gurvinder372; 16.08.2016
comment
Извиняюсь за задержку с ответом, не получилось. Спасибо за ваши усилия. - person gurvinder372; 01.09.2016
comment
@gurvinder372 gurvinder372 Это должно работать, вот пример с живым фрагментом: stackoverflow.com/a/35879636/4600982 - person Supersharp; 01.09.2016
comment
Спасибо, это работает. Пожалуйста, включите в свой ответ, что а) вам нужно импортировать его вне шаблона, используя тег ссылки, б) оператор импорта должен быть первым перед другими правилами css. - person gurvinder372; 01.09.2016