One nice way of handling this is to use the CSSStyleSheet object. In a nutshell, you can create a module like shadowCssRules.js and in that create a CSSStyleSheet object and set your global rules ( * { box-sizing: border-box;} ) then in your WebComponent constructor you call this.shadowRoot.adoptedStyleSheets = [shadowCssSheet]. This MDN page has an example at the bottom https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleShe...

Also allows you to update the style sheet from anywhere in your js and it’ll effect all the shadow doms that adopted it