Was bedeuten / deep / und :: shadow in einem CSS Selector?

In der Suche, bei der Polymer -, sehe ich den folgenden CSS-Selektor in den Stile tab von Chrome 37 developer tools:

Was bedeuten /deep /und :: shadow in einem CSS Selector?

Ich habe auch gesehen, wie ein Selektor, der mit dem pseudo-Selektor ::shadow.

Also, was tun /deep/ und ::shadow in einem CSS-Selektor zu bedeuten?

Kommentar zu dem Problem
Verwandte: Was ist das ::content-pseudo-element, und wie funktioniert es? Nicht sagen, wie die dummen da, während ich glaube, die Antwort es ist umfassender, die Q&A hier wurde weiter oben geschrieben, und die Antwort ist auch gut. Kommentarautor: TylerH

InformationsquelleAutor der Frage Drew Noakes | 2014-09-01

  1. 52

    Als Joel H. Punkte in die Kommentare, Chrome hat da veraltet die /deep/ combinator, und es gibt ein syntax-Fehler im IE.

    HTML5-Web-Komponenten bieten eine vollständige Kapselung von CSS-Stilen.

    Dies bedeutet, dass:

    • Stile definiert, die innerhalb einer Komponente können nicht Auslaufen und haben Auswirkungen auf den rest der Seite
    • Stile definiert, die auf der Seite nicht ändern, wird die Komponente eigene styles

    Aber manchmal wollen Sie haben, Seite-level-Regeln zu manipulieren, um die Präsentation-Komponente definierten Elemente innerhalb Ihrer shadow DOM. Um dies zu tun, fügen Sie /deep/ zu den CSS-Selektor.

    Also im Beispiel gezeigt, html /deep/[self-end] ist die Auswahl aller Elemente unter der html (top-level -) element, das die self-end Attribut, einschließlich derjenigen begraben innerhalb web-Komponenten " shadow DOMs Wurzeln.

    Wenn Sie erfordern eines ausgewählten Elements auf ein Leben in einer shadow-root, dann können Sie die ::shadow pseudo-Selektor auf seinem übergeordneten element.

    Betrachten:

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

    Den Selektor html /deep/span wählen beide <span> Elemente.

    Den Selektor ::shadow span wählen, wird nur der innere <span> element.

    Lesen Sie mehr dazu in der W3C CSS-Scoping-Modul Spezifikation.

    InformationsquelleAutor der Antwort Drew Noakes

Schreibe einen Kommentar