What Is the Different Between: Host, :Host(), :Host-Context Selectors
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...
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?
2 Answers
:host
Is syntax for styling the host component.
:host(.element)
Is an experimental CSS pseudo-class function that selects the shadow host of the shadow DOM containing the CSS it is used inside (Reference)
:host-context
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.
Base on my observation :host apply style for the component,:host(.class) apply style for the component if component has the class specified.:host-context(.class) apply style for the component if the host component of component has the class specified and if component has the class that also count.
In short, :host-context seems search deep for the condition.
Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
