我正在尝试制作一个半可重复使用的小部件，但我遇到了问题。我试图将一些 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>
最佳答案
我最近遇到了同样的问题。我最终做的是使用:
<template id="templateContent">
<style> @import "css/generalStyle.css"; </style>
</template>
附加信息:这工作得很好，除了现在我遇到了一些缓存问题，因为 Chrome 在硬重新加载后似乎没有重新加载这些资源。
关于css - 在模板标签内使用远程样式表(带 shadow dom)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23176330/