Suppression de ::shadow et /deep/ dans Chrome 63

À partir de Chrome 63, vous ne pouvez plus utiliser les sélecteurs de masquage d'ombres ::shadow et /deep/ pour appliquer un style au contenu situé à l'intérieur d'une racine fantôme.

  • Le combinateur /deep/ agira comme un sélecteur de descendants. x-foo /deep/ div fonctionne comme x-foo div.
  • Le pseudo-élément ::shadow ne correspond à aucun élément.

La décision de supprimer

::shadow et /deep/ ont été abandonnés dans la version 45 de Chrome. Tous les participants au meetup des composants Web d'avril 2015 ont répondu à cette question.

La principale préoccupation des sélecteurs de perçage d'ombres est qu'ils enfreignent l'encapsulation et créent des situations où un composant ne peut plus modifier son implémentation interne.

Des améliorations ont été apportées à la spécification CSS Shadow Parts au lieu des sélecteurs de piercing d'ombre. Les parties ombrées permettent à l'auteur du composant d'exposer les éléments nommés de manière à préserver l'encapsulation, tout en permettant aux auteurs de pages de styliser plusieurs propriétés à la fois.

Que dois-je faire si mon site utilise ::shadow et /deep/?

Les sélecteurs ::shadow et /deep/ n'affectent que les anciens composants Shadow DOM v0. Si vous utilisez Shadow DOM v1, vous ne devriez pas avoir à modifier quoi que ce soit sur votre site.

Vous pouvez utiliser Chrome Canary pour vérifier que votre site n'est pas concerné par ces nouvelles modifications. Si vous remarquez des problèmes, essayez de supprimer toute utilisation de ::shadow et /deep/. S'il est trop difficile de supprimer l'utilisation de ces sélecteurs, envisagez de passer du Shadow DOM natif au polyfill du DOM ombragé. Vous ne devez effectuer cette modification que si votre site repose sur le Shadow DOM v0 natif.

En savoir plus

Intention de suppression | Outil de suivi de l'état de Chrome | Bug Chromium