title: Angular ViewEncapsulation.ShadowDOM doesn't isolate css styles
body: <p>I've read that <code>ShadowDOM</code> isolates the shadow dom tree from external css so i've tried to play around with it in Angular using <code>ViewEncapsulation.ShadowDom</code>, but it seems like the global css are still leaking into the Shadow DOM.</p>
  <p>Kindly see the code here:
  <a href="https://stackblitz.com/edit/shadow-dom-test?file=src/app/app.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/shadow-dom-test?file=src/app/app.component.ts</a></p>
  <pre><code>import { Component, VERSION, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ],
    encapsulation: ViewEncapsulation.ShadowDom
  })
  export class AppComponent  {
    name = 'Angular ' + VERSION.major;
  }
  </code></pre>
  <p>After that, setting any css in <code>style.css</code> will affect the elements under <code>AppComponent</code> even though the encapsulation is set to <code>ViewEncapsulation.ShadowDom</code>and the component is contained  under ShadowDom tree.</p>
  <p>See the screenshot below, Font-size is inherited by elements under ShadowDOM</p>
  <p><a href="https://i.stack.imgur.com/gayHG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gayHG.png" alt="enter image description here" /></a></p>