Angular Component CSS 封装是如何工作的？

我想了解如果我创建两个样式表

Style 1

.heading {
  color: green;
}

Style 2

.heading {
  color: blue;
}

现在如果这两种样式写在两个不同的视图中，渲染它们的时候 在布局上作为局部视图 https://jakeydocs.readthedocs.io/en/latest/mvc/views/partial.html，那么在这种情况下可能会发生冲突 并且一个可以覆盖另一个的风格。

BUT

Using angular https://www.nglesson.com/Livres/ng-book2-angular-5-r67.pdf（参见第16页），不同组件中的这两种样式怎么封装在同一个页面上呢？为什么 CSS 没有被覆盖？

例如

import { Component } from '@angular/core';

@Component({
 selector: 'app-user-item',
 template: '<p class="heading">abc</p>',
 styleUrls: ['./user-item.css']
})
export class UserItemComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

用户项目.css

.heading{ color :green}

应用程序用户.component.ts

import { Component } from '@angular/core';

@Component({
 selector: 'app-user',
 template: '<p class="heading">abc</p>',
 styleUrls: ['./user.css']
})
export class UserItemComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

user.css

.heading{ color :blue}

在页面上呈现此内容时：

<app-user></app-user>
<app-user-item></app-user-item>

这是结果：

Angular（默认情况下）模拟影子 DOM.

它动态创建一些仅适用于该组件中的元素的 HTML 属性。

例如：

<app-user></app-user>
<app-user-item></app-user-item>

将转变为

<app-user _ngcontent-1></app-user>
<app-user-item _ngcontent-2></app-user-item>

你的 css 将被转换为：

.heading[_ngcontent-1] { color: blue }
.heading[_ngcontent-2] { color: green }

你可以找到更完整的解释here https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html和文档here https://angular.io/guide/component-styles