Один из вариантов - встроить ваш виджет в iframe;как таковые, никакие стили из окружающего документа не наследуются.Этот метод используется многими социальными виджетами, такими как кнопки общего доступа, чтобы не было никаких стилевых помех.
Существуют только CSS-опции, которые начинают внедряться.Safari поддерживает:
.widget { all: revert; )
, что делает именно то, что вам нужно.Есть большая поддержка:
.widget { all: initial; )
, которая поддерживается всеми современными браузерами (не Internet Explorer), но удаляет стили назад после по умолчанию браузера (например, <div>
s станет встроенным)поэтому вам придется добавить их обратно, например:
.widget block { display: block; }
Но, по крайней мере, вы не получите стилевое столкновение.
https://developer.mozilla.org/en-US/docs/Web/CSS/initial
https://developer.mozilla.org/en-US/docs/Web/CSS/revert