Using styled in a Shadow DOM

[xrofa]

Is there any way of having the styled pre-configured for a specific shadow root so we can use it everywhere importing it directly from 'goober'?
What I'm doing right now is just having:
export const styled = goober.styled.bind({ target: target });

And then importing this styled everywhere in my code.
Is there a better way to define a global target so the styled exported from 'goober' always uses that target?

[cristianbote]

Hey there!

Unfortunately there isn't. What I ended-up doing in the past was to re-export everything that needed to be bind to a different target and use the import from there. Not super great but not that bad either. Have you tried that?

[goldmont]

Hi, same here. News about this? Thanks.

[cristianbote]

Hey @goldmont, not much due to limited time availability and lack of support. PRs are welcomed though. I imagine this could be part of the setup function, but not sure if that will cover it.

[fregante]

this could be part of the setup function

I think that there's no reason to ever use document over the element's shadowRoot when available, so support could/should be automatic.

The only problem is whether goober has access to the react component's DOM element. I think it does in this case:

const Message = styled('div')`
  display: flex;
`;

<Message/>

Internally, it would use div.getRootNode().append(styleElement)