Description
When working with Web Components in Shadow mode, it is very common to define :host styles. They could be put in a GlobalStyles, but because these are about styling the component itself, rather than say the html/body, putting them in a GlobalStyles call breaks the usability of the tss-react pattern. These are not global styles in the idea of the term, but they do need to be treated as global when injected.
Would it be possible for global-ish styles (technically created as globals, but conceptualized and used as local) to still be used in the local structure? This could be implemented as a specific exception to the :host keyword. It could also be implemented as a wrapper that is removed at runtime (such as :global(:host); this would have the added benefit of being usable with other elements that might want this behaviour. Either would work for me.
An example from my project:
I need to use css something like this:
:host {
width: 1920px;
height: 1080px;
}
.inner {
width: "100%",
height: "100%",
background: url(image.png) center/contain no-repeat,
}However, when putting it into makeStyles like this:
const [useStyles, HostStyles] = makeStyles<{
variant: CometProps["variant"]
}>((theme, { variant }) => ({
":host": {
width: `${variants[variant].width}px`,
height: `${variants[variant].height}px`,
...theme.shadow,
},
inner: {
width: "100%",
height: "100%",
background: `url(${variants[variant].image}) center/contain no-repeat`,
},
}))A prefix is still added to the :host key, resulting in something like .comet-1wpixln-Comet-:host as the "class name", which is obviously not valid. I need that entry in the style object to stay as :host without anything added to it.