How to apply common CSS styles to many Shadow Roots at once?

Question

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

Answer 1

UPDATE: 2019 - Use Constructable stylesheets

As of 2019, Constructable stylesheets is the approach to apply stylesheets to shadow DOM and web components in general. Read more about it here.

Previous answer:

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 ) )