Component styles work by isolating the generated selectors from their associated style files to a dynamic component ID that is appended to all its style selectors. For example, our app component's generated div selector will have an extra attribute, similar to [_ngcontent-c0], added to it:
div[_ngcontent-c0] {
padding-top: 20px;
}
These attribute component IDs are unique to each component in our application and prevent similar style selectors from cascading into each other:
div[_ngcontent-c1] {
background-color: silver;
border: 1px solid gray;
}
This is a powerful feature for preventing our styles from causing unintended cascading in our user interface. However, sometimes, we do want cascading styles in our application for easy style reuse. In that case, the styles should be elevated to our /src/styles.scss file, instead of the one that is shared globally with all components.