::shadow en /deep/ verwijderen in Chrome 63

Vanaf Chrome 63 kunt u de schaduwdoorborende selectoren ::shadow en /deep/ niet meer gebruiken om inhoud binnen een schaduwroot te stylen.

  • De /deep/ combinator fungeert als een afstammelingselector. x-foo /deep/ div werkt als x-foo div .
  • Het pseudo-element ::shadow komt met geen enkel element overeen.

Het besluit om te verwijderen

::shadow en /deep/ zijn verouderd in Chrome versie 45. Dit is besloten door alle deelnemers aan de Web Components meetup van april 2015 .

Het grootste probleem met shadow-piercing selectors is dat ze de encapsulatie schenden en situaties creëren waarin een component zijn interne implementatie niet meer kan wijzigen.

De CSS Shadow Parts -specificatie wordt verder ontwikkeld als alternatief voor shadow piercing selectors. Shadow Parts stelt een componentauteur in staat om benoemde elementen bloot te leggen op een manier die de inkapseling behoudt en pagina-auteurs tegelijkertijd de mogelijkheid biedt om meerdere eigenschappen tegelijk te stylen.

Wat moet ik doen als mijn site ::shadow en /deep/ gebruikt?

De selectors ::shadow en /deep/ zijn alleen van toepassing op oudere Shadow DOM v0-componenten. Als u Shadow DOM v1 gebruikt, hoeft u niets aan uw site te wijzigen.

U kunt Chrome Canary gebruiken om te controleren of uw site niet vastloopt met deze nieuwe wijzigingen. Als u problemen ondervindt, probeer dan het gebruik van ::shadow en /deep/ te verwijderen. Als het te lastig is om het gebruik van deze selectors te verwijderen, overweeg dan om over te stappen van native shadow DOM naar de shady DOM polyfill. U hoeft deze wijziging alleen door te voeren als uw site afhankelijk is van native shadow DOM v0.

Meer informatie

Intentie tot verwijderen | Chromestatus Tracker | Chromium-bug