What does it mean: host / deep / selector means?

Question

Please explain in a simple way that :host /deep/ means:

 :host /deep/ .ui-autocomplete { width: 85%; } 

Answer 1

Used to create child components when using emulated encapsulation.

More about this can be found here:

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

Selector

Btw /deep/ now deprecated:

The combined descendant-piercing shadow deflection is outdated, and support is removed from major browsers and tools. Thus, we plan to abandon support in Angular (for all 3 of / deep /, →> and :: ng-deep). Until then, :: ng-deep should be preferred for wider tool compatibility.

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

Use the pseudo-class selector: host for target styles in the element in which the component is located (as opposed to targeting elements inside the component template).

Thus, the selector :host /deep/ .ui-autocomplete means "on the current hosting element, go deep (search in child components too) and find elements with the ui-autocomplete .

The following is additional information about the encapsulation function of the view:

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