View encapsulation scopes component styles and can rewrite selectors so styles remain isolated from other components. Component SCSS is attached through the component metadata and processed into browser-ready CSS during the build. section 28.3.2
The :host selector targets the component’s host element. It is needed when a component state, such as a disabled customButton element, must affect styles inside the component. section 28.3.2
Styling a disabled custom button
A custom button stylesheet combines the host selector with an internal button selector: :host[disabled] button[class*="custom-button-"]. This lets the component respond to a disabled attribute on its host while styling the contained button. The component loads the stylesheet with styleUrls: ["customButton.component.scss"].
Encapsulation also affects third-party-generated elements. Angular Material’s ripple directive inserts a div with the mat-ripple-element class; ::ng-deep prevents encapsulation from modifying that class selector so the ripple can be styled. section 28.3.3
Styling a Material ripple
Import MatRippleModule, apply matRipple to the button, and use ::ng-deep when defining the ripple style. The custom button can then retain its encapsulated component styles while reaching the generated ripple element. section 28.3.3
