如何将常用的CSS样式一次应用于多个Shadow Roots？

考虑一下，我有几个使用Shadow DOM来隐藏内部div-soup和布局的元素。如何将常用的CSS样式一次应用于多个Shadow Roots？

即使他们不同，他们也会共享相同的CSS样式表，因为他们使用的是应该以一致的方式设计样式的相同元素集。例如，这可以是一个CSS框架（bootstrap）。

问题是这个样式表很大。

什么是在许多影子根（在SD V1）之间共享如此大样式表的最有效方式？

2016-12-05 tomalec

您可以在<style>元素的第一行中的阴影DOM定义使用import CSS规则：

var root = D1.attachShadow({mode: open }) 
root.appendChild(T1.content.cloneNode(true))

2016-12-05 22:59:35 Supersharp

感谢：

<div id=D1></div> <template id=T1> <style> @import url('/css/stylesheet.css') </style> ... </template>

然后在影子DOM根导入<template>content ！我用你的解决方案创建了jsbin http://jsbin.com/veruki/edit?html,output – tomalec

当我们在包含全局样式的''中有一个'

回答