my use case is basically the following: I'm building a component library which should render a component in a web component using shadowRoot.
I have two CSS files:
component-library.css styles the component library and should not leak into the web components (I'm aware that they do when the components use inherit. This is fine.).
project.css is the global CSS file for the project, defining lots of custom properties inside :root {}. I am NOT able to change that.
What I now want is to use project.css inside the shadowRoot to style the components. The reason that it should be inside the shadowRoot is that I don't want this file to affect the component library.
Right now, when I'm trying to implement it, everything works as I want it to except that the custom properties from project.css is missing.
My understanding is that this can't work as the project.css would have to use :host {} instead of :root {}.
Is that correct? Would there be any way to achieve this though?
Thanks a lot!