How to isolate the html code of my chrome / FF extension from the influence of styles from the site?

Question

JavaScript

My browser extension, which should work on all pages visited by the user, needed modals. I decided to use sweetalert . But on some sites there is a problem - site styles affect the appearance of modals.

In principle, all tags used in sweetalert have their own css classes, and I can reset all site styles (for example, for h1-6) by referring to these classes.
I would like to get a wider solution, because. the current one is clearly a crutch. What if another extension does not have such classes? How to isolate the html code of my extension (including the libraries used) for chrome/FF from the influence of styles from the site?

Answer 1

Use shadow DOM , both browsers support it very well

Answer 2

A more or less good solution was suggested by Vladimir Malkov .
Unfortunately the selector *leaks in the shadow DOM as well, but most of the time it doesn't matter.
In the future, css rules may help: - currently there is no browser support. - currently no browser support . You can use , for everything, but then the default styles will also disappear, you will have to return them manually for each element. Now only s has an absolute guarantee, but there you have to fool around a lot with sizes and positioning.
contain: layout
all: revertrevert
iframeallowtransparency="true"