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?

0

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.

2

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.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.