Ce n' :accueil /deep/ sélecteur de dire?

Veuillez expliquer de manière simple ce que :host /deep/ signifie:

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

OriginalL'auteur Pismotality | 2017-10-24

  1. 21

    Il est utilisé pour permettre le style de l'enfant composants lors de l'utilisation de emulated vue de l'encapsulation.

    Plus sur ce qui peut être trouvé ici:

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

    Btw /deep/ sélecteur est désormais obsolète:

    L'ombre-piercing descendant du combinator est obsolète et le support est retiré de grands navigateurs et outils. En tant que tel nous avons l'intention de déposer, dans Angulaire (pour tous les 3 de /de profondeur/, >>>:: ng profond). Jusqu'alors ::ng-profondeur devrait être privilégiée pour une plus large compatibilité avec les outils.

    :host est utilisé pour l'adresse de l'hébergement de l'élément qui est celui que vous utilisez pour ajouter le composant quelque part (par exemple,<app-component>).

    Utiliser :accueil pseudo-sélecteur de classe pour cible les styles dans l'élément qui héberge le composant (au lieu de cibler les éléments à l'intérieur du composant de modèle).

    De sorte que le sélecteur de :host /deep/.ui-autocomplete signifie "sur d'hébergement actuel de l'élément, d'aller en profondeur (recherche dans les composants enfants trop) et de regarder pour les éléments avec la classe ui-autocomplete.

    Voici quelques informations supplémentaires sur la vue d'encapsulation fonctionnalité:

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

    OriginalL'auteur Martin Adámek