How to apply common CSS styles to many Shadow Root

2019-01-15 15:37发布

问题:

Consider, I have few elements which use Shadow DOM to hide their internal div-soup and layout.

Even tough they are different, they share the same CSS style sheet, as they are using the same set of elements that are supposed to be styled in consistent manner. This could be, for example, a CSS framework (bootstrap).

The problem is that this style sheet is pretty big.

What is the most efficient way to share such big style sheet between many Shadow Roots (in SD V1)?

回答1:

You can use an import CSS rule at the first line of a <style> element defined in the Shadow DOM:

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

Then import the <template> content in the Shadow DOM root:

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