The webpage css overrides the extension css

[Rooban19]

I was building the extension using tailwind CSS. But, the extension UI is rendering differently on different websites. I mean, on some of the sites, it is behaving as we expected, But some of the sites, it intakes the css property of that particular website.

Any idea of how to fix that ?

I also tried injectCSS. That is also not working

[fuadtamton]

@Rooban19 If you are displaying something in the web page, then move your UI to an iframe and load css in this iframe to prevent this issue.

[felixswang]

I'm using a different framework but also have the same problem. I tried isolation with custom element and shadow DOM of web components, but no luck either.

Adding an iframe won't always work because sometimes I need to insert element, say a button, into the host page's DOM, and that button alone can introduce conflict of style.

@Rooban19, have you figured out a solution?

[Rooban19]

I have used the shadow DOM to render the css that I need. And also I wrote the css for all the tags with unique css selectors name which won't affect the css of host's. And this solution worked for me @felixswang