::ng-deep va être déprécié - Des alternatives ?

Question

Le docteur dit :

Le combinateur descendant de type "shadow-piercing" est déprécié et son support est supprimé des principaux navigateurs et outils. Nous prévoyons donc de ne plus le prendre en charge dans Angular (pour les trois combinaisons /deep/, >>> et ::ng-deep). En attendant, il convient de préférer ::ng-deep pour une compatibilité plus large avec les outils.

Puisque je veux passer aux nouvelles versions sans changer le code, quelles sont les alternatives pour les méthodes dépréciées ?

Answer 1

Après avoir parcouru les notes réelles de la réunions de comité sur ce sujet, il semble qu'il n'y ait pas encore d'alternative proposée. En utilisant le ::ng-deep permet de laisser Angular se charger de rompre l'encapsulation des styles (pour les nœuds du DOM dans les composants enfants de votre modèle) qu'il effectue pour vos styles (et de ne pas utiliser les fonctionnalités natives du navigateur, ce qui le rend évidemment plus résistant à l'avenir). Je pense que cette note est juste pour vous faire savoir qu'ils prévoient de mettre en œuvre le mécanisme du navigateur dès qu'il sera mis en place. Personnellement, je n'hésiterais pas à l'utiliser.

La seule façon d'éviter d'utiliser cet opérateur dans votre CSS est de ne pas laisser Angular gérer l'encapsulation du style de votre composant en procédant ainsi :

import { ViewEncapsulation } from '@angular/core';

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

Si vous faites cela, vos styles deviennent cependant globaux. Veillez donc à faire précéder chaque règle de style de votre composant pour vous assurer qu'ils ne fuient pas au-delà. Par exemple, si vous avez un MyCustomComponent avec un sélecteur de my-custom-component :

my-custom-component button { ... } /* good */
button { ... } /* bad */

Answer 2

Une alternative qui peut fonctionner est d'inclure les styles css dans votre global styles.scss fichier*.

Par exemple, supposons que vous souhaitiez ajouter un style à la section <div class="mat-form-field-flex"> qui est généré sous un <mat-form-field> vous pouvez utiliser ::ng-deep de même :

votre.composant.scss

::ng-deep mat-form-field.mat-form-field div.mat-form-field-flex {
  padding: 0 0 0 .75em;
}

Ou au contraire, vous pouvez changer :

styles.scss :

mat-form-field.mat-form-field  div.mat-form-field-flex {
  padding: 0 0 0 .75em;
}

---

* : Il s'agit de n'importe quel fichier qui est ajouté à la collection des styles dans votre angular.json fichier.

"styles": [
          "src/theme.scss",
          "src/styles.scss"
        ],

Answer 3

Si quelqu'un a encore besoin de cela, il suffit d'utiliser "/deep/" au lieu de ::ng-deep

Exemple :

/deep/.mat-form-field{
  //put style here
}