Anwenden von Stilen auf browsereigene Elemente, auf natives ShadowDOM?

Question

Nach einem Vortrag von Rob Dodson über Web Components, in dem er die brandneue „Katze“ erwähnte ^^ und „Hut“ ^ CSS-Selektoren, ich habe nach den Möglichkeiten gefragt, Stile nicht nur auf das ShadowDOM eines benutzerdefinierten Elements, sondern auch auf das ShadowDOM der nativen Elemente des Browsers anzuwenden?

Ist es möglich, Elemente aus dem ShadowDOM zu formatieren?In welchen Browsern und wie?Der einzige relevante Artikel, den ich gefunden habe, war von Dimitry Glazkov über „Was zum Teufel ist Shadow DOM?', wo er darlegt, mithilfe von Pseudo-Selektoren und in ShadowDOM-Teilbäume einzudringen -webkit-appearance: none; Regeln.

Answer 1

Aufgrund des Status des Entwurfs von CSS-Scoping-Modul Level 1 Da ich mich jederzeit ändern konnte, funktionierte mein ursprünglicher Ansatz nicht lange.

In Chrome v33+ du musst dich umdrehen Enable Experimental Web Platform Features In chrome://flags aktivieren, damit der folgende Code funktioniert.

---

Beginnen mit Chrome Canary v33 und sein Katzenselektor ^^ die Antwort ist: Ja!
Update 30.03.2014: Chrome Canary v35+ unterstützt die neueste Version des Selektors, jetzt die sogenannte /deep/ Wähler.

Es stilisiert über alle Grenzen hinweg und funktioniert auch mit nativen Elementen.

Sehen: http://codepen.io/Volker_E/pen/jsHFC

/* ... Example for applying to all h2 elements, no matter if DOM or any ShadowDOM subtree ... */
:root ^^ h2 {
    font-family: "Arial Black", sans-serif;
}

/* Cr 33+: The "cat" also works on native elements' ShadowDOM */
video ^^ input[type="button"]:first-child {
    opacity: .75;
    -webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}

/* Cr 35+: /deep/ also works on native elements' ShadowDOM */
video /deep/ input[type="button"]:first-child {
    opacity: .75;
    -webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}

Answer 2

Zumindest in Chrome ist das möglich.Wenn Sie Shadow DOM von überprüfen <input type="date"> du wirst sehen:

<input type="date">
  #document-fragment
    <div part="-webkit-datetime-edit" id="date-time-edit">
      <div part="-webkit-datetime-edit-fields-wrapper">
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="12" aria-help="Month" part="-webkit-datetime-edit-month-field">mm</span>
        <div part="-webkit-datetime-edit-text">/</div>
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="31" aria-help="Day" part="-webkit-datetime-edit-day-field">dd</span>
        <div part="-webkit-datetime-edit-text">/</div>
        <span role="spinbutton" aria-valuetext="blank" aria-valuemin="1" aria-valuemax="275760" aria-help="Year" part="-webkit-datetime-edit-year-field">yyyy</span>
      </div>
    </div>
</input>

Dann können Sie separate Pseudoelemente formatieren:

::-webkit-datetime-edit-year-field {
  font-weight: bold;
}

Laut Rob Dodson selbst es ist möglich zu verwenden ^ Und ^^ Selektoren zum Stylen von nativem Shadow DOM.Diese Regel sollte also funktionieren (Chrome Canary, glaube ich):

input[type="date"] ^ [part="-webkit-datetime-edit-year-field"] {
  font-weight: bold;
}