Quoi utiliser à la place de ::ng-deep

Question

Je tente de styliser un élément placé par la sortie du routeur dans Angular et je veux m'assurer que l'élément généré obtient une largeur de 100%

De la plupart des réponses, je vois que je devrais utiliser le sélecteur::ng-deep, mais selon les docs d'Angular, il est en voie d'obsolescence. Y a-t-il une alternative à ::ng-deep?

Answer 1

En ce qui concerne mes recherches, je n'ai pas trouvé de remplacement pour ng-deep ou les autres alternatives applicables. Cela est dû, je pense, au fait que l'équipe Angular se conforme à la spécification du shadow dom du W3C, qui incluait initialement des sélecteurs tels que deep. Cependant, le W3C a depuis supprimé cette recommandation, sans la remplacer. Jusqu'à ce que cela se produise, j'imagine que l'équipe Angular continuera de maintenir ::ng-deep et ses alternatives disponibles, mais dans un état obsolète en raison de l'état en attente des ébauches du W3C. Je ne peux pas prendre le temps de trouver la documentation pour étayer cela dès maintenant, mais je l'ai vu récemment.

En résumé : continuez à utiliser ::ng-deep et ses alternatives jusqu'à ce qu'un remplacement soit créé - l'obsolescence n'est qu'un avertissement précoce pour que les gens ne soient pas surpris lorsque le changement réel se matérialise.

-- MISE À JOUR --

https://drafts.csswg.org/css-scoping-1/ Voici la proposition d'ébauche si cela vous intéresse. Il semblerait qu'ils travaillent sur un ensemble robuste de sélecteurs pour les éléments dans un arbre shadow dom ; c'est cette spécification, une fois approuvée, qui, je pense, informera le clone Angular, s'il existe même (c'est-à-dire qu'Angular pourrait ne pas avoir besoin de mettre en œuvre ses propres sélecteurs une fois que cela sera disponible dans les navigateurs).

Answer 2

L'alternative simple et facile à un style profond est un style commun utilisant le sélecteur d'éléments du composant parent. Donc si vous aviez ceci dans hero-details.component.css :

:host ::ng-deep h3 {
  font-style: italic;
}

Cela deviendrait ceci dans styles.css :

app-hero-details h3 {
  font-style: italic;
}

Essentiellement, un style profond est un style non encapsulé, donc il me semble conceptuellement plus proche d'un style commun que d'un style de composant. Personnellement, je n'utiliserais plus de styles profonds. Les changements de rupture sont normaux dans les mises à jour majeures et la suppression de fonctionnalités obsolètes est autorisée.

Answer 3

Pour contourner le ::ng-deep obsolète, je désactive généralement ViewEncapsulation. Bien que ce ne soit pas la meilleure approche, cela m'a bien servi.

Pour désactiver ViewEncapsulation, faites ce qui suit dans votre composant :

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class HeaderComponent {

}

Cela rendra les styles .scss de ce composant globaux à toute l'application. Pour ne pas permettre aux styles de remonter dans la hiérarchie vers les composants parent et frère, enveloppez tout le scss avec le sélecteur comme suit :

app-header {
  // vos styles ici et tous les styles des composants enfants peuvent se trouver ici
}

À présent, les styles spécifiés ici descendront vers les composants enfants, donc vous devez être très précis avec vos sélecteurs CSS et faire attention lorsque vous ajoutez du CSS (peut-être ajouter le sélecteur enfant spécifié dans votre application Angular et ensuite ses styles).

Je dis que ce n'est pas la meilleure approche en raison du paragraphe précédent, mais cela m'a bien servi.

Answer 4

Comme quelqu'un l'a déjà dit, si vous utilisez une bibliothèque tierce, il est pratiquement impossible d'éviter le ::ng-deep de temps en temps.

Jetons un coup d'œil à quelques alternatives

1. Utiliser ViewEncapsulation.None

   @Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.scss'], encapsulation: ViewEncapsulation.None })

Sachez que le fait de casser l'encapsulation du composant rendra les styles globalement disponibles. Je peux penser à 2 façons d'éviter les collisions et les bizarreries CSS :

• Enveloppez le template de votre composant avec une classe. Ainsi, example.component.html devrait ressembler à ceci:

Maintenant, comme il n'y a pas d'Encapsulation, vous pouvez modifier le composant tiers en ciblant leurs classes. Cela dit, example.component.scss devrait ressembler à ceci:

.app-example-container {
/* Tout le code CSS va ici */
.mat-tab-group .mat-tab-label {color: red;}
}

• ou utilisez le nom de balise du composant comme enveloppe. Par exemple:

  app-example { / Tout le code CSS va ici / .mat-tab-group .mat-tab-label {color: red;} }

2. Utiliser des styles globaux

Aussi simple que d'ajouter un nouveau fichier CSS à votre tableau de styles de votre fichier de configuration angular.json. Sachez que cela deviendra éventuellement de plus en plus difficile à maintenir. Personnellement, j'éviterais cette option ou l'utiliserait en dernier recours :)

3. Utiliser une directive

Je suis d'accord que c'est un peu douloureux car vous ne pouvez pas inclure Styles dans une directive (de la même manière que vous le faites dans un composant), mais cela peut parfois être pratique. Vous pourriez également utiliser un composant pour appliquer les styles de la même manière que l'équipe Angular Material l'a fait avec les boutons

4. :host ::ng-deep

Vous connaissez déjà celui-ci, je voulais juste préciser que l'utiliser avec le sélecteur hôte est la manière recommandée par Angular pour éviter les éventuelles collisions de styles.

Une note personnelle pour le futur : https://angular.io/guide/component-styles
C'est le premier endroit où regarder pour les alternatives officielles/manières de procéder

5. Encouragez les auteurs de bibliothèques à utiliser des variables CSS que vous pourriez personnaliser depuis le composant parent ou les parties ombrées (quand c'est possible). L'équipe Ionic a fait un excellent travail à ce sujet. Pour une explication plus détaillée, vous pouvez consulter ici

Édition 1. Comme @beppe9000 l'a mentionné dans un commentaire, ::ng-deep est une chose d'Angular. Même si l'équipe Angular supprimait cette fonctionnalité demain, votre application déjà déployée continuerait de fonctionner. La confusion est apparue à cause de l'ancien /deep/ modificateur.

Answer 5

Il ne s'agit pas d'un remplacement général pour ::ng-deep, mais pour le cas d'utilisation décrit par l'auteur de la question:

Dans le cas particulier où vous souhaitez styliser l'élément inséré par un router-outlet, il existe une solution élégante en utilisant le sélecteur de voisin adjacent en CSS:

router-outlet+* {
  /* stylisation ici... */
}

Cela s'appliquera à tous les éléments qui sont des voisins directs d'un router-outlet.

Lecture complémentaire:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet