Values css _nghost-c0 in angular

Question

I'm learning Angular 5 and I see the html tags with the ng generated attributes: _nghost-c0, _nghost-c1...

What does it mean?

[_nghost-c3] .employees[_ngcontent-c3] button[_ngcontent-c3] {
 color: #681f32;
}

Answer 1

This is called Emulated Shadow DOM. These are attributes that angular uses to isolate component styles from one another.

To explain, let app.component.html like this

<header>
  <span>from App Component</span>
</header>

<app-alert></app-alert>

app.component.css

header span {
    color: red;
}

In alert.component.html

<header>
    <span>from alert component</span>
</header>

alert.component.css

header span {
    color: blue;
}

for more: https://dev.to/themeticulist/everything-you-should-know-about-styles-in-angular-12ab