我正在尝试制作一个半可重复使用的小部件，但我遇到了一个问题。我试图在阴影根中封装一些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>
我最近遇到了同样的问题，我最终做的是使用：
<template id="templateContent">
<style> @import "css/generalStyle.css"; </style>
</template>
附加信息：这工作得很好，除了，现在我有一些缓存问题，因为Chrome似乎没有在重新加载后重新加载这些资源。
让我们回答一下。现在，阴影dom支持直接标记。
你可以直接使用
<link rel="stylesheet" href="yourcss1.css">
<link href="yourcss2.css" rel="stylesheet" type="text/css">
检查它们是由whatwg和W3C更新的
在阴影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链接可以在阴影dom中使用
谢谢。
实际上聚合物有一个内部实用程序来加载css链接，我已经实现了一个使用聚合物内部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
我通过这种方式将样式表的link元素直接添加到了shadow root：
let link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'whatever.css');
this.shadowRoot.appendChild(link);
它似乎工作正常。 （我从组件的构造函数中调用它。）