Strategies for styling a CRA project that is encapsulated in a ShadowDom

[kintz09]

Overview
Hi all! I'm developing micro-frontends that will be used in other react applications (think web components or widgets). We're using a shadowDom/shadowRoot to encapsulate the styles an ensure there's no CSS conflicts. I'm looking for strategies to style components that will be children of the shadow dom.

Project Notes

• React + Typescript (CRA4)
• I prefer to write my CSS using Sass and CSS modules.
• We are a small team
• We want to avoid ejecting
• CRACO or similar is acceptable

Problems
I know how to create a the shadow dom and how to load in styles either inline or with an external linked stylesheet. However, I don't have a clue how to do this in my local environment let alone production.

Since these projects are nearly completely encapsulated starting with the default react 'root' node, in theory, if I could just load the CSS file generated by the build into the ShadowDom, all would be good. But that is only helpful in a production build that has already been QA'd. Here are some of the challenges I've been facing:

• The generated css files get chunked and have a unique hash. This is a feature worth preserving! Regardless, I don't know how to predict what the name of the generated css file will be to dynamically load it into the shadow dom.
• When developing locally, the css file doesn't actually get generated, style are injected in <style> tags in the head of the document
• CSS-in-JS is just not an option for our team
• other ideas (including those below) I've had would require ejecting the project

Potential Solutions?
Ideas for solutions I've had, but have no clue if its possible to do with CRA:

• Have webpack generate the CSS file as default, but also convert the the CSS file to a string to be loaded into the shadow dom
• If there was a variable that points to the URL of the generated css file, I could simply load the stylesheet into the shadow dom. Its okay at this time if the stylesheet is loaded into the HTML head and the shadow dom.

TL;DR;

• Does anyone have experience working with ShadowDoms in React, specifically around styling that could help?
• Does anyone know if its possible to get the generated css file when working locally, without ejecting CRA and totally customizing webpack?
• Can anyone recommend a solution to manage sass stylesheets for components that will be used both inside a shadow dom and not in a shadow dom?