How to isolate a widget from site styles?

• 0
  The situation is as follows - I am developing a widget for myself, which is connected using a short script and HTML code:
  

  <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>

  
  and everything is ok - it connects and works, but the styles of the site or block affect the generated widget.
  The question is - how can I isolate the generated widget from the styles and scripts of the site on which it appears? It is needed by analogy with an iframe.

  JavaScript Anonymous, Feb 12, 2020

---

1 Answers
• 0

  #myWidget * {
  
  	 all: initial;
  
   }

  Emma Ramos

---