child selectors don't work with react-shadow/styled-components

[mindplay-dk]

Have a look here, please:

https://stackblitz.com/edit/vitejs-vite-tqgchu61?file=src%2FApp.tsx

Because the container <div> is located above the shadow root, the h1 child selector doesn't work:

This of course is the intention of using a shadow root in the first place, but it breaks the ability to override styles inside a styled component.

There is a way, which is to interpolate the styles into a wrapper component inside the shadow root:

https://stackblitz.com/edit/vitejs-vite-uzhyzddx?file=src%2FApp.tsx

But this is not exactly obvious or elegant, and not really how styled-components is designed to be used.

I would have preferred the <div> was inside the shadow root - but I don't suppose that's possible? The wrapper div is there in the first place, I guess, so that React can determine and hold it's place in the DOM?

We could add a second wrapper <div> inside the shadow root, but the one extra wrapper element is already not ideal, since it affects layout.

As a workaround, I started using display: contents to avoid the extra div affecting layout - but discovered too late that there are serious accessibility issues in most browsers with this.

In practice, I'm not really sure we should be using shadow roots in components the way it's enabled by this library...?

(I started using this because I'm working in a large codebase with lots of message global styles that basically wreck anything new you're attempting to build - I discovered I could "hide" from the existing CSS in this way, and it is providing a way forward for components to be replaced one at a time without tearing down the global CSS, but it definitely seems to come at a cost...)