tl;dr: Use document.adoptedStyleSheets to attach one constructable stylesheet to many shadow roots. This offloads style changes to the browser and updates all web components that have adopted these style sheets. Otherwise, you’ll have to use JavaScript to “manually” update each shadow root which means it’s likely going to be slower.

Do note that while there’s good support for adopted stylesheets in Chromium-based browsers such as Chrome and Edge, Safari is still lacking.

For more information, please see adoptedStyleSheets on MDN