ViewEncapsulation.Emulated styles are copied into #shadow-root by a ViewEncapsulation.(Native|ShadowDom) component

I have a sample repository https://github.com/collinstevens/angular-encapsulation which demonstrates my question.

There are three components: EmulatedComponent, NativeComponent, and ShadowDomComponent which using ViewEncapsulation.Emulated, ViewEncapsulation.Native, and ViewEncapsulation.ShadowDom respectively.

The styles from the EmulatedComponent are copied into the <head> as described on https://angular.io/guide/component-styles, but are also copied into each #shadow-root and I would like to know why, and how to prevent this if possible.

emulated.component.scss

div {
  width: 50px;
  height: 50px;
  background-color: black;
  display: inline-block;
}

native.component.scss

div {
  width: 50px;
  height: 50px;
  background-color: red;
  display: inline-block;
}

shadow-dom.component.scss

div {
  width: 50px;
  height: 50px;
  background-color: yellow;
  display: inline-block;
}

Solution

It's a known bug, the workaround at the moment is to basically not mix encapsulation modes.

But the scenario i assume you are encountering might be that you are mixing third parties having different types of encapsulation modes? If so you either have to take in consideration of your css structure or just simply rethink what third-party lib you are mixing.

Update

In consideration to comment make all components to run native encapsulation by telling compiler to do so with compilerOptions in order to not conflict with native web components.

Do so by adding in your tsconfig.json file(it's tsconfig.app.json in ng version 6+):

"angularCompilerOptions": {
    "defaultEncapsulation": 1
}