Как изолировать виджет от стилей сайта?

Question

[Эмиль Рахматуллин]

Ситуация следующая - разрабатываю виджет для себя, который подключается с помощью коротенького скрипта и HTML кода:

<div id="myWidget"></div>

<script type="text/javascript">
	(function (w,d,s,o,f,js,fjs) {
		w['MyWidget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
		js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
		js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
	}(window, document, 'script', 'bw', 'main.js'));
	bw('init', { key: 'XXXXXXXXXXXX' });
</script>

и всё ок - подключается и работает, но стили сайта или блока влияют на сгенерированный виджет.
Вопрос - как мне изолировать сгенерированный виджет от стилей и скриптов сайта, на котором он появляется? Нужно по аналогии с iframe.

Comments

[Эмиль Рахматуллин]

Кстати, я использую пространство имён для виджета + методологию БЭМ. Но это не изолирует виджет от внешнего CSS. В этом и проблема

[sinneren]

Эмиль Рахматуллин, ну раз влияют такие стили, как глобальные на теги, то только iframe. Или обнуление ВСЕХ стилей под себя для своего корневого родителя

[Эмиль Рахматуллин]

sinneren, это тоже без проблем. Написал индивидуальный нормалайзер CSS для виджета, но все случаи не предугадать, поэтому и думаю, что было бы проще изолировать.

Пробовал ещё CSS свойство all: unset; - фигня полная.

Answer 1

[Adamos]

#myWidget * {
	 all: initial;
 }

Comments

[Эмиль Рахматуллин]

Всё равно сторонние стили добираются до виджета. Я пробовал это.

[Adamos]

Эмиль Рахматуллин, условия CSS имеют приоритет. Те, которые у вас на скриншоте - разный, но более высокий у верхнего, как более конкретного.
Для повышения приоритета можно использовать либо !important; либо #конкретный элемент.