Я пытаюсь создать полуразрушаемый виджет, но у меня проблема. Я пытаюсь инкапсулировать некоторый CSS-код внутри теневого корня, чтобы он не влиял на остальную часть веб-страницы, но этот CSS используется в нескольких виджетах, поэтому я пытаюсь включить удаленную таблицу стилей. Ни один из примеров, которые я нашел, не использовал удаленную таблицу стилей, и мне было интересно, возможно ли это.
Пример:
<template id="templateContent">
<head>
<link rel="stylesheet" href="css/generalStyle1.css">
</head>
<body>
<div class="affectedByGeneralStyle1"></div>
</body>
</template>
script включить шаблон:
<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>