Angular组件样式是如何实现从定义到渲染的复杂工作流程的呢？

本文共计1788个文字，预计阅读时间需要8分钟。

在开发Angular组件时，我们习惯将组件的样式写在相应的css文件中，但并未完全理解Angular如何实现样式隔离。例如，在A组件中写了h1{color:red;}，这个样式只会在A组件中生效，而不会影响到其他组件。

在开发 Angular 组件的过程中，我们习惯把组件的样式写在对应的 css 文件中，但是一直不了解 Angular 是怎样做到样式隔离的，比如在 A 组件中写了 h1 { color: red }，这个样式只会在 A 组件中生效，而不会影响到其他的组件。为了探究原理，就有了这篇文章，以下内容基于 Angular CLI 10.1.1 版本创建。