Menu
Please explain in a straightforward way what :host /deep/ means:
:host /deep/ .ui-autocomplete { width: 85%; } 
646
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.
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.
Published March 19, 2022. angularcss. The ::ng-deep CSS selector is often used in an Angular Component's CSS to override the styles of a third-party component or a child component's styles.
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.
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
57
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
