Angular Component CSS封装如何工作？

Question

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

样式1

.heading {
  color: green;
}

风格2

.heading {
  color: blue;
}

现在，如果将这两种样式写在两个不同的视图中，则在将它们作为部分视图呈现在布局上时，在这种情况下可能会发生冲突，并且一个样式可能会覆盖另一个样式。

但

使用Angular（请参见第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() {}

}

user-item.css

.heading{ color :green}

app-user.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>

结果如下：

Answer 1

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 }

您可以在此处找到更完整的说明，并在此处找到文档