如何將常用的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

當我們在包含全局樣式的''中有一個'

回答