Protect element from global css

Question

My js is embedded on a third party website and it creates an <iframe> which contains a simple comments panel , but apparently on this specific website there is a CSS stylesheet which styles every <iframe> tag in the dom with the !important flag , so i can't change those css rules and the website dev team won't change this behaviour, there is another way to overcome this? can i change the tagname and still be an iframe? anything?

Answer 1

You can use the all property with the initial value to default the styles for that element.

From the docs:

The all CSS shorthand property sets all of an element's properties (other than unicode-bidi and direction) to their initial or inherited values, or to the values specified in another stylesheet origin.

A code example:

#div-to-reset-styles {
  all: initial;
  * {
    all: unset;
  }
}

Just target your specific iframe and you should be fine.