Menu
I 'm styling an angular component from it 's style file ,I have found that I have to use :host ,:host() or :host-context selector , What is the different between each of them?
368
:host() The :host() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.
The :host selector allows to select the shadow host (the element containing the shadow tree). For instance, we're making <custom-dialog> element that should be centered.
In an Angular application, the "host context" selector is a way to define component styles based on some condition that exists outside of the current component. The Angular documentation describes the "host context" as looking for said condition higher-up in the DOM tree.
Every component is associated within an element that matches the component's selector. This element, into which the template is rendered, is called the host element. The :host pseudo-class selector may be used to create styles that target the host element itself, as opposed to targeting elements inside the host.
Is syntax for styling the host component.
Is an experimental CSS pseudo-class function that selects the shadow host of the shadow DOM containing the CSS it is used inside (Reference)
Is syntax for styling a specific class anywhere outside the current element. The class must already be applied to an element outside the scope of the current element.
More in-depth info on the context of Angular applications can be found in this blog post.
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
