À partir de Chrome 63, vous ne pouvez plus utiliser les sélecteurs de perçage d'ombre ::shadow et /deep/ pour styliser le contenu d'une racine d'ombre.
- Le combinateur
/deep/agit comme un sélecteur descendant.x-foo /deep/ divfonctionnera commex-foo div. - Le pseudo-élément
::shadowne correspond à aucun élément.
La décision de suppression
::shadow et /deep/ ont été abandonnés dans la version 45 de Chrome. Cette décision a été prise par tous les participants à la réunion Web Components d'avril 2015.
Le principal problème des sélecteurs de perçage d'ombre est qu'ils enfreignent l'encapsulation et créent des situations où un composant ne peut plus modifier son implémentation interne.
La spécification CSS Shadow Parts est en cours de développement en tant qu'alternative aux sélecteurs de perçage d'ombre. Les parties d'ombre permettent à un auteur de composant d'exposer des é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/ ne s'appliquent qu'aux anciens composants Shadow DOM v0. Si vous utilisez Shadow DOM v1, vous ne devriez pas avoir besoin de modifier quoi que ce soit sur votre site.
Vous pouvez utiliser Chrome Canary pour vérifier que votre site ne rencontre pas de problème avec ces nouvelles modifications. Si vous constatez 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 DOM natif à la polyfill DOM ombragée. Vous ne devriez avoir besoin d'apporter cette modification que si votre site repose sur le Shadow DOM natif v0.