I have created generic svelte components which I want to add to an existing project. The components make use of third party libraries which use global operator for some of the styles.
When I add the component to the existing project, the styles of the existing project are affected by the child component.
Example:
In the image above, there is an outer element with * { color: green } and an inner element with * { color: red }. It works as expected, no style is leaked inside or outside.
However, if I use :global(), that style is applied to parent components as well. I'm using UI libraries that do this, so I have no control over their use of global. For example, if I add a material button using a library, the parent styles go haywire:
I used a simple example which could actually be solved by redefining a few css styles on the parent component, but I have many components with many layers of nesting using multiple third party components which attempt to change a lot of global styles so redifining styles in parent would be impractical.
Is there a way to tell svelte to scope all of a components styles to itself?
ps: In the example images above, the child element is converted to web-component. So the global styles are leaking out not only in svelte apps, but even leaking outside the shadow dom