Как применить общие стили CSS ко многим корням теней одновременно?

Question

Учтите, у меня есть несколько элементов, которые используют Shadow DOM, чтобы скрыть свой внутренний div-суп и макет.

Даже несмотря на то, что они разные, они используют одну и ту же таблицу стилей CSS, так как они используют один и тот же набор элементов, которые должны быть стилизованы в согласованном порядке. Это может быть, например, CSS-фреймворк (начальная загрузка).

Проблема в том, что эта таблица стилей довольно большая.

Какой самый эффективный способ поделиться такой большой таблицей стилей между многими Shadow Roots (в SD V1)?

Answer 1

Вы можете использовать import Правило CSS в первой строке <style> элемент, определенный в Shadow DOM:

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

Затем импортируйте <template>content в корне Shadow DOM:

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