在模板标记（使用shadow dom）中使用远程样式表 [英] Use a remote stylesheet inside a template tag (with shadow dom)
问题描述
我试图做一个半消费的小部件，但我遇到了一个问题。我试图封装一个阴影根内的一些CSS代码，以便它不影响网页的其余部分，但这个CSS被用于多个小部件，所以我试图包括一个远程样式表。没有一个例子我发现使用远程样式表，我想知道是否可能。
I am trying to make a semi-resuseable widget but I am running into a problem. I am trying to encapsulate a some CSS code inside a shadow root so that it does not affect the rest of the webpage but this CSS is used across multiple widgets so I am trying to include a remote stylesheet. None of the examples I have found use a remote style sheet and I was wondering if this was possible.
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>
推荐答案
我最近遇到了同样的问题，使用：
i came across the same problem recently, what i ended up doing was using:
<template id="templateContent">
<style> @import "css/generalStyle.css"; </style>
</template>
其他信息：这个工作很好，除了现在我有一些缓存问题，似乎在重新加载后重新加载这些资源。
additional info: this worked just fine except, now i'm having some cache issues as Chrome does not seem to reload those ressources after a hard reload.
这篇关于在模板标记（使用shadow dom）中使用远程样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
