CODEWITHSUNDEEP
javascripthtmlcssweb-componentshadow-dom
tomalec
tomalec

Reputation: 900

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

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

Upvotes: 7

Views: 2514

Answers (1)

Supersharp
Supersharp

Reputation: 31189

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

Upvotes: 8

Related Questions