Используйте удаленную таблицу стилей внутри тега шаблона (с теневым доменом)

Я пытаюсь сделать виджет для повторного использования, но у меня возникла проблема. Я пытаюсь инкапсулировать некоторый код CSS внутри теневого корня, чтобы он не влиял на остальную часть веб-страницы, но этот CSS используется для нескольких виджетов, поэтому я пытаюсь включить удаленную таблицу стилей. Ни один из найденных примеров не использует удаленную таблицу стилей, и мне было интересно, возможно ли это.

EX:

<template id="templateContent">
    <head>
        <link rel="stylesheet" href="css/generalStyle1.css">
    </head>
    <body>
        <div class="affectedByGeneralStyle1"></div>
    </body>
</template>

скрипт для включения шаблона:

<div id="host"></div>
<script>
    var importedData = (html_import_element).import.getElementById("templateContent");
    var shadow = document.querySelector('#host').createShadowRoot();
    var clone = document.importNode(importedData.content, true);
    shadow.appendChild(clone);
</script>
Источник

3 ответа

Решение

Я недавно столкнулся с той же проблемой, то, что я закончил делать, использовал:

<template id="templateContent">
     <style> @import "css/generalStyle.css"; </style>
</template>

дополнительная информация: это работало просто отлично, за исключением того, что теперь у меня есть некоторые проблемы с кешем, так как Chrome, похоже, не перезагружает эти ресурсы после полной перезагрузки.

Источник

Позвольте добавить к ответу. Прямой тег теперь поддерживается в теневом доме.

Вы можете напрямую использовать

<link rel="stylesheet" href="yourcss1.css">
<link href="yourcss2.css" rel="stylesheet" type="text/css">

Проверьте, что они были обновлены Whatwg и W3C

Полезная ссылка для использования CSS в Shadow Dom.

https://w3c.github.io/webcomponents/spec/shadow/ https://github.com/whatwg/html/commit/43c57866c2bbc20dc0deb15a721a28cbaad2140c

https://github.com/w3c/webcomponents/issues/628

Прямую ссылку CSS можно использовать в тени DOM

Благодарю.

Источник

Я добавил элемент ссылки таблицы стилей непосредственно в теневой корень следующим образом:

    let link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('href', 'whatever.css');
    this.shadowRoot.appendChild(link);

Вроде нормально работает. (Я вызвал это из конструктора компонента.)

Источник

На самом деле у полимера есть внутренняя утилита для загрузки ссылок CSS, я реализовал функцию javascript, которая использует полимерный внутренний процессор CSS, поэтому, если вы хотите добавить ссылки CSS во время выполнения, вы можете использовать его:

Polymer('my-element', {           
        ready: function () {
           this.importCss("path/myfile.css");
        },
        importCss: function (path) {
             var $shadow = $(this.shadowRoot);
            var $head = $("<div></div>");
            var $link = $("<link rel='stylesheet' type='text/css'>");
            $link.attr("href", path);
            $head.append($link);
            var head = $head[0];
            this.copySheetAttributes = Polymer.api.declaration.styles.copySheetAttributes;
            Polymer.api.declaration.styles.convertSheetsToStyles.call(this, head);
            var styles = Polymer.api.declaration.styles.findLoadableStyles(head);
            if (styles.length) {
                var templateUrl = this.baseURI;
                Polymer.styleResolver.loadStyles(styles, templateUrl, function () {
                    var $style = $shadow.find("style");
                    if ($style.length > 0){
                        $shadow.find("style").append($head.find("style").html());
                    }else{
                        $shadow.append($head.html());
                    }
                });
            }
        }
});

Примечание: этот код требует jquery для запуска

Источник
Другие вопросы по тегам