Как изолировать html код моего расширения для chrome/FF от влияния стилей с сайта?

Question

[ChernovGV]

Моему расширению для браузера, которое должно работать на всех посещаемых пользователем страницах, понадобились модальные окна. Я решил использовать sweetalert. Но на некоторых сайтах возникает проблема - стили сайта влияют на внешний вид модальных окон.

В принципе, все используемые в sweetalert теги имеют свои css классы, и я могу обнулить все стили сайта (например для h1-6) обращаясь к этим классам.
Хотелось бы получить более широкое решение, т.к. текущее явно костыль. Что делать если у другого расширения не будет таких классов? Как изолировать html код моего расширения (в т.ч. используемых библиотек) для chrome/FF от влияния стилей с сайта?

Answer 1

[Владимир Мальков]

Используйте shadow DOM, оба браузера отлично его поддерживают

Comments

[ChernovGV]

Владимир Мальков Не знал о такой вещи, спасибо...
Но, это что же получается, мне нужно весь html код плагина переложить в elem.shadowRoot.innerHTML ?
Мне кажется эту задачу снаружи плагина не решить, а лезть внутрь, тоже не правильно...

Answer 2

[Aetae]

Более-менее хорошее решение предложил Владимир Мальков.
К сожалению селектор * протекает и в shadow DOM, но чаще всего это не имеет значения.

В будущем могут помочь css правила:
contain: layout - сейчас нет поддержки браузерами.
all: revert - сейчас нет поддержки браузерами revert.

Можно использовать all: unset, для всего, но тогда пропадут и стили по умолчанию, придётся к каждому элементу возвращать их вручную.

Абсолютная гарантия есть сейчас только у iframe с allowtransparency="true" но там придётся сильно морочиться с размерами и позиционированием.