title: Isolate div from host page's css
body: <p>I'm developing a widget to show content from my site on other sites and I'm trying to figure out how to isolate the div in which the widget lives from any css from the host page. I've include a jQuery plugin to scope the style to the div, and I'm also trying to use the css <code>all: initial</code> and <code>all: unset</code>. </p>
  
  <p>I'm running into some problems though. When I apply the aforementioned css properties to the div, everything within is rendered as a string of text (including my javascripts).</p>
  
  <p>I've also attempted placing the widget div inside another div and resetting the css of that div, but it has no effect.</p>
  
  <pre><code>&lt;style&gt;
      #company-widget {
          all: initial;
      }
      #company-widget * {
          all: unset;
      }
  &lt;/style&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      // jQuery Scoped CSS plugin here
  
      $(document).ready(function(){
          var company = 'taco-corp';
          $.scoped();
          $.ajax({
              type: 'GET',
              url: 'http://localhost:3000/' + company + '/widget.js?callback=?',
              contentType: "application/javascript",
              crossDomain: true,
              dataType: 'JSONP',
              success: function(data) {
                  $('#company-widget').html(data.html);
              },
              error: function(e) {
                  console.log(e.message);
              }
          });
      });
  &lt;/script&gt;
  &lt;div id="company-widget" style="max-width: 900px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My case is a bit more complex than <a href="https://stackoverflow.com/questions/15459130/css-in-my-javascript-widget-colliding-with-target-page-css">this case</a> because of some constraints I must operate within. My widget depends on bootstrap css, so applying !important to everything is not a feasible option. It also needs to be responsive, so using an iframe is not an option. Lastly, it has to be plug-and-play ready. A user needs to simply drop in the code and have it render. In most cases, I will have no control over anything else on the host page.</p>