Comment styliser les composants enfants dans Vue.js à l'aide de sélecteurs profonds ?

Application de styles aux composants enfants dans Vue.js : /deep/, >>> et ::v-deep

Dans Vue.js, vous pouvez utiliser des sélecteurs approfondis pour styliser les éléments dans les composants enfants. Cependant, tenter d'utiliser les opérateurs /deep/, >>> ou ::v-deep dans les règles de style peut ne pas fonctionner comme prévu. Voici un guide sur la façon d'utiliser correctement ces opérateurs.

Vue 2.0 - 2.6

• Sass :

  Utilisez ::v-deep avant le sélecteur pour appliquer des styles aux éléments de l'enfant composants.

  ::v-deep .child-class {
    background-color: #000;
  }

• Sans Sass :

  Utiliser >>> avant le sélecteur pour obtenir le même effet.

  >>> .child-class {
    background-color: #000;
  }

Vue 3 (et Vue 2.7)

• Syntaxe unifiée :

  Utilisez :deep() comme sélecteur, en plaçant le sélecteur d’élément cible entre parenthèses. Cette syntaxe fonctionne avec ou sans Sass.

  :deep(.child-class) {
    background-color: #000;
  }

• Syntaxe obsolète :

  Le préfixe ::v-deep est désormais obsolète dans Vue 3. Le bouton >>> L'opérateur est également obsolète.

Vue 3 Nouveaux sélecteurs

• Contenu de l'emplacement :

  Utilisez :slotted() pour styliser le contenu transmis slots.

  :slotted(.slot-class) {
    background-color: #000;
  }

• Styles globaux :

  Utilisez :global() pour enregistrer les styles globaux à partir d'un composant étendu.

  :global(.my-class) {
    background-color: #000;
  }

Cadrage Exigence

Dans toutes les versions de Vue, le