Question

即使将组件样式表仅单独应用于其组件（例如，在使用默认ViewEncapsulation.Emulated时），您将在模板上使用的类名仍会与任何现有的全局样式冲突，因此您不能确实使用了多个类的名称空间。

这可能导致始终为类名加上前缀，从而导致名称组很长，很奇怪。

是否有最佳实践来使您的班级名称简短明了（理想情况下为1个字），而又不会与可能存在的任何全局样式冲突？

实际用例：如果我使用引导程序，则在设计组件范围的自定义逻辑行时不能使用class="row"。

查看 this StackBlitz 。我希望a组件的标头是固定宽度且仅带有边框，但是由于全局样式的原因，它的背景最终也变成了红色。

是的。我可以使用其他单词，但是我应该始终了解全局样式当前使用的整个单词集，更不用说我不知道将来是否会添加更多的全局样式，特别是在大型应用程序中

Answer 1

将视图封装更改为本机封装将使Angular使用本机阴影DOM并避免全局样式的冲突

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

如何防止全局CSS选择器干扰Angular（6）中的隔离组件？

1 个答案: