web-dev-qa-db-fra.com

Que signifie / deep / and :: shadow dans un sélecteur CSS?

En regardant Polymer, je vois le sélecteur CSS suivant dans l'onglet Styles de Chrome 37:

enter image description here

J'ai aussi vu un sélecteur avec pseudo sélecteur ::shadow.

Alors, qu'est-ce que /deep/ et ::shadow dans un sélecteur CSS signifie?

csshtml5polymerweb-componentshadow-dom
63
Drew Noakes

Comme le souligne Joel H. dans les commentaires, Chrome a depuis déconseillé le combinateur /deep/ Et il génère une erreur de syntaxe dans IE.

Les composants Web HTML5 offrent une encapsulation complète des styles CSS.

Cela signifie que:

  • les styles définis dans un composant ne peuvent pas fuir et affecter le reste de la page.
  • les styles définis au niveau de la page ne modifient pas les propres styles du composant

Cependant, vous souhaitez parfois avoir des règles au niveau de la page pour manipuler la présentation des éléments de composant définis dans leur DOM fantôme. Pour ce faire, vous ajoutez /deep/ Au sélecteur CSS.

Ainsi, dans l'exemple présenté, html /deep/ [self-end] Sélectionne tous les éléments situés sous l'élément html (niveau supérieur) possédant l'attribut self-end, Y compris ceux enfouis à l'intérieur des racines shadow DOM du composant Web. .

Si vous avez besoin d'un élément sélectionné pour résider dans une racine ombre, vous pouvez utiliser le pseudo-sélecteur ::shadow Sur son élément parent.

Considérer:

<div>
  <span>Outer</span>
  #shadow-root
  <my-component>
    <span>Inner</span>
  </my-component>
</div>

Le sélecteur html /deep/ span Sélectionnera les deux éléments <span>.

Le sélecteur ::shadow span Ne sélectionne que l'élément interne <span>.

En savoir plus à ce sujet dans la spécification CSS Scoping Module du W3C.

75
Drew Noakes