Как “сбросить” ненужные стили?

Делаю встраиваемый js виджет, и проблема заключается в том, что стили страницы, на которую помещается js код, частично меняют внешний вид виджета.

То, как выглядит виджет:

То, как выглядит в оригинале:

В данном случае, разница вызвана тем, что в первом случае, html имеет font-size: 10px, во втором же случае, это свойство не определено. Если я выставлю html font-size 15px, то всё будет почти так же как в оригинале, но в этом случае, и размер шрифта на самой странице так же изменится.

Если же я весь виджет оберну каким-то дивом, и задам там font-size: 15px !important, то это повлияет не на все элементы, т.к. некоторые элементы изначально имеют свойство font-size со значениями в rem (как я понимаю, это % от данного свойства в html)

И получается, что нужно у каждого элемента задавать свойство вручную. Но, помимо этого, увидел ещё и всякие hover и focus свойства, которые отличают оригинал от того, что создаётся при помощи js кода.

Каким образом я могу игнорировать все те стили, которые могут передаваться моему виджету от страницы, в которую он встраивается ?

Я подумал про iframe с собственным body, в котором этот виджет может быть размещён, но это не входило в изначальные планы.

Заранее спасибо за любую помощь!

ДОПОЛНЕНИЕ

Пробовал использовать YUI CSS Reset, а именно, импортировать css:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset-context/cssreset-context-min.css">

и повесить класс на обёртку:

<div id="widget-modal" class="yui3-cssreset"></div>

но в итоге, результат такой: