在模板标签内使用远程样式表（使用 shadow dom）答案

【问题标题】：Use a remote stylesheet inside a template tag (with shadow dom)在模板标签内使用远程样式表（使用 shadow dom）
【发布时间】：2014-06-04 06:34:51
【问题描述】：

我正在尝试制作一个半可重复使用的小部件，但我遇到了问题。我试图将一些 CSS 代码封装在影子根中，这样它就不会影响网页的其余部分，但是这个 CSS 用于多个小部件，所以我试图包含一个远程样式表。我发现的示例都没有使用远程样式表，我想知道这是否可能。

前：

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

【问题讨论】：

查看新更新的 .现在，shawdow Dom 中支持标签。检查下面的答案。

标签： css html stylesheet shadow-dom templatetag

【解决方案1】：

我以这种方式将样式表的链接元素直接添加到影子根：

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

它似乎工作正常。（我从组件的构造函数中调用了这个。）

【讨论】：

【解决方案2】：

让我们添加答案。现在 shadow dom 支持直接标签。

可以直接使用

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

检查它们是否已被 whatwg 和 W3C 更新

在 shadow dom 中使用 css 的有用链接。

https://w3c.github.io/webcomponents/spec/shadow/#inertness-of-html-elements-in-a-shadow-tree https://github.com/whatwg/html/commit/43c57866c2bbc20dc0deb15a721a28cbaad2140c

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

直接css链接可以在shadow dom中使用

谢谢。

【讨论】：

【解决方案3】：

实际上，polymer 有一个内部实用程序来加载 css 链接，我已经实现了一个使用 polymer 内部 css 处理器的 javascript 函数，所以如果你想在运行时添加 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 才能运行

【讨论】：

【解决方案4】：

我最近遇到了同样的问题，我最终做的是使用：

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

附加信息：这工作得很好，除了，现在我遇到了一些缓存问题，因为 Chrome 在硬重新加载后似乎没有重新加载这些资源。

【讨论】：

一些附加信息：这里是 the relevant spec，它说 <link> 在 shadow DOM 中是惰性的。
shadow dom 中的样式表在 chrome 54 中可用 developers.google.com/web/fundamentals/getting-started/primers/…
我做了一个本地小demo，模板不使用主html css，这样对吗？