It appears that there may be some confusion regarding the usage of :host-context in applying styles to component hosts conditionally based on their ancestors. In your specific example, the list component should have overflow: unset, but this style would only apply if the component is nested within a parent element that includes mat-sidenav-content. For more information on this concept, you can refer to the documentation provided here:
https://angular.io/guide/component-styles#host-context
I have created a demonstration on stackblitz showcasing the application of overflow css and the conditional styling of text color to illustrate how it affects one component and not the other. Unfortunately, there isn't a direct way to style a parent element based on the presence of a child component.
In the demo, I have also included the use of ::ng-deep in another component for reference, although I advise against using it as it can lead to persistent styles. Additionally, ::ng-deep is deprecated and no longer recommended.
https://stackblitz.com/edit/angular-material-sidenav-generate-nav-5fvfjq?file=src/app/list/list.component.css
Edit: The stackblitz now demonstrates an example of :host implementation as well.
To better understand the concept of host elements, it's helpful to view them in HTML terms rather than strictly as components. For instance, in the DOM structure, <app-list> serves as the host element, not its content. If you wish to style elements within the host, :host may not be necessary. You can explore my updated stackblitz example to see how host works when inspecting the CSS.
The HTML code snippet looks like this:
<app-list _nghost-qnl-c20="">
<p _ngcontent-qnl-c20=""> This text will appear red only when contained within mat-sidenav-content. The font family is defined by the host element.
</p>
</app-list>
And here is the corresponding CSS:
mat-sidenav-content[_nghost-qnl-c20], mat-sidenav-content [_nghost-qnl-c20] {
color: red;
}
[_nghost-qnl-c20] {
font-family: Arial, Helvetica, sans-serif;
}
As shown, the host utilizes an Angular-generated attribute, with :host representing this attribute alone while :host-context(element) translates to element [attribute] in the CSS.