gpt4 book ai didi

css - 在模板标签内使用远程样式表(带 shadow dom)

转载 作者:技术小花猫 更新时间:2023-10-29 12:23:49 29 4
gpt4 key购买 nike

我正在尝试制作一个半可重复使用的小部件,但我遇到了问题。我试图将一些 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/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com