title: How to stop inheritance of CSS applied to global scope inside Angular's Emulated Encapsulation?
body: <p>We have an Angular Application inside an ASP.NET MVC View,
  So inside <code>.cshtml</code> we have this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;app-root&gt;&lt;/app-root&gt;
  </code></pre>
  <p>There are styles applied to the entire ASP.NET app which are colliding with the Angular components. Note that, Native <code>ShadowDom</code> encapsulation is not an option for me due to it's limited support of browsers.</p>
  <p>I am limiting the scope by having the styles applied to each component (Emulated version),</p>
  <p>Assume this is my ASP.NET view with it's own set of <code>styles/stylesheets</code> specified as below and there is <code>&lt;app-root&gt;&lt;/app-root&gt;</code> is where I am having my app which holds other components, I want to stop the styles in the style tag to bleed over my <code>app-root</code>. How can I achieve this?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;style&gt;
      body {
          background-color: powderblue;
      }
  
      h1 {
          color: blue;
      }
  
      p {
          color: red;
      }
      &lt;/style&gt;
      &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  </code></pre>