ViewEncapsulation changes css styles specificity(weight)

Question

I have created a new Angular CLI project and a component where I have tried work on css specificity. Wherewer I tryed, class styles overwrite tag styles, but only on Angular project it's working vise versa

I have founded that ViewEncapsulation.None makes the css styles show darkgreen backgound-color and with the angular default view encapsulation (ViewEncapsulation.Emulated) browser shows aqua background-color.

component code

import { Component, OnInit } from '@angular/core';
import {ToastrService} from "ngx-toastr";
//import {ViewEncapsulation} from "@angular/cli/lib/config/schema";


@Component({
  selector: 'app-toastr',
  templateUrl: './toastr.component.html',
  styleUrls: ['./toastr.component.css'],
  //encapsulation: ViewEncapsulation.None
})

html code

<div>
  <div class="myspan">
    something
  </div>
</div>

and styles

div div{
background-color: aqua;
}

.myspan {
  background-color: darkgreen;
}

I expect to receive an answer why it works differently

arunraj6 arunraj6 · Accepted Answer · 2019-05-19T15:03:42

FYI

ViewEncapsulation.Emulated: Any styles we define on a component don’t leak out to the rest of the application. But, the component still inherits global styles like twitter bootstrap.

ViewEncapsulation.Native: Styles we set on a component do not leak outside of the components scope. Component is also isolated from the global styles we’ve defined for our application.

ViewEncapsulation.None: We are not encapsulating anything, the style we defined in our component has leaked out and started affecting the other components.

ViewEncapsulation changes css styles specificity(weight)

1 Answers