How to apply common CSS classes to shadow elements?

Question

As pointed out here:

Because of the isolation of styles, which is a feature of Shadow DOM, you cannot define a global CSS rule that will be applied in the Shadow DOM scope.

Is there any way to define simple CSS classes globally in some global styles.css file (for example) that we can use in all kinds of places and re-use them in individual components?

Currently, the simple answer would be to add a corresponding <link href="styles.css"> tag to every single component that we define. This has been proposed here to allow web components use bootstrap classes, and again here to support ionic. Is that a good approach? Would that not be terrible performance-wise, if we included big styles.css in tens or hundreds of components?

Answer 1

Constructable Stylesheets are a proposal to solve exactly that problem.

In a nutshell, it's a way to share the same stylesheet across components without requesting the stylesheet each time. Currently it's Chrome only, but there is a polyfill, and, Firefox at least, seem to support this proposal.