Native web-components - styling shadow dom

Question

I have an index.html file that contains css classes. I would like that this classes or at least some of them work in the shadow dom of my component.

I found a way for chrome to use ::part(). With this i can give styles to my Component "share-button" - share-button::part(button) {}

Well. In chrome and opera it works very well but not in firefox (yes, latest version).

Is there a way to ship around for browser who do not support ::part()?

Thank you

Answer 1

One way it to save the CSS that is needed in both the shadowDOM and the regular DOM in a separate CSS file and then load it into the page and into the shadowDOM using the <link> tag.

Another way is to bind the external CSS into the component using a packaging app so it is fully self contained. And then use <link> to get it into the main page.