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

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!