I'm making a browser extension. It creates some UI on the page. In the UI, there are elements which are being forcefully modified by css depending on a website is opened. Aside from making it ugly, it also might break the whole UI! The question is how to protect my poor elements from css terror?
There are multiple options such as iframes, extremely specific classnames, and adding the !important field everywhere. But your best bet might be to use a shadow DOM which allows for a hidden DOM tree attached to the regular (perhaps that third party website) DOM.
I've seen another thread on this post that might provide more detailed answers.