Sign Up

Sign In

Forget Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

You must login to ask question.

What does :host /deep/ selector mean?

  • 0

Please explain in a straightforward way what :host /deep/ means:

:host /deep/ .ui-autocomplete {
  width: 85%;
}
Click to rate this post!
[Total: 0 Average: 0]
Share This Post
Share
  1. It is used to allow styling child components when using emulated view encapsulation.

    More about this can be found here:

    https://angular.io/guide/component-styles

    Btw /deep/ selector is now deprecated:

    The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

    :host is used to address the hosting element – that is the one that you use to add the component somewhere (e.g. <app-component>).

    Use the :host pseudo-class selector to target styles in the element that hosts the component (as opposed to targeting elements inside the component’s template).

    So the selector :host /deep/ .ui-autocomplete means “on current hosting element, go deep (search in child components too) and look for elements with class ui-autocomplete.

    Here is some additional information about the view encapsulation feature:

    https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

    • 0
Leave an answer

Leave an answer

Browse

close