Que signifie: hôte / profondeur / sélecteur?
S'il vous plaît expliquer d'une manière simple ce que :Host /deep/ veux dire:
:Host /deep/ .ui-autocomplete {
width: 85%;
}
Il est utilisé pour autoriser le style des composants enfants lors de l'utilisation de emulated view encapsulation.
Plus d'informations à ce sujet peuvent être trouvées ici:
https://angular.io/guide/component-styles
Btw /deep/ Le sélecteur est maintenant obsolète:
Le combinateur de descendants perçant les ombres est obsolète et la prise en charge est supprimée des principaux navigateurs et outils. En tant que tel, nous prévoyons de supprimer le support dans Angular (pour tous les 3 de/deep /, >>> et :: ng-deep). Jusque-là: ng-deep devrait être préféré pour une compatibilité plus large avec les outils.
:Host est utilisé pour adresser l’élément d’hébergement - c’est celui que vous utilisez pour ajouter le composant quelque part (par exemple, <app-component>).
Utilisez le sélecteur de pseudo-classe: Host pour cibler les styles dans l'élément hébergeant le composant (par opposition au ciblage d'éléments dans le modèle du composant).
Donc, le sélecteur :Host /deep/ .ui-autocomplete signifie "sur l’élément d’hébergement actuel, approfondissez (recherchez également dans les composants enfants) et recherchez des éléments de classe ui-autocomplete.
Voici quelques informations supplémentaires sur la fonctionnalité d'encapsulation de vue:
https://blog.edlytram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html