cristianbote/goober

Using styled in a Shadow DOM

xrofa opened this issue · 4 comments

xrofa commented

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 commented

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 commented

Hi, same here. News about this? Thanks.

  • 👎1
cristianbote commented

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 commented

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)