Appliquer des styles aux éléments propres aux navigateurs, au ShadowDOM natif ?

Question

Après une conférence de Rob Dodson sur les Web Components, où il a évoqué le tout nouveau "chat" ^^ et "chapeau" ^ Sélecteurs CSS, j'ai posé des questions sur les possibilités d'appliquer des styles non seulement au ShadowDOM d'un élément personnalisé, mais également au ShadowDOM des éléments natifs du navigateur ?

Est-il possible de styliser les éléments du ShadowDOM ?Dans quels navigateurs et comment ?Le seul article pertinent que j'ai trouvé est celui de Dimitry Glazkov sur «Qu'est-ce que c'est que Shadow DOM ?', où il expose l'accès aux sous-arbres ShadowDOM en utilisant des pseudo-sélecteurs et -webkit-appearance: none; règles.

Answer 1

En raison de l'état d'avancement du projet de Module de cadrage CSS niveau 1 pouvant changer à tout moment, mon approche initiale n'a pas fonctionné très longtemps.

Dans Chrome v33+ tu devras te tourner Enable Experimental Web Platform Features dans chrome://flags activé pour que le code ci-dessous fonctionne.

---

Commençant par Chrome Canari v33 et son sélecteur de chat ^^ la réponse est: Oui!
Mise à jour du 30/03/2014 : Chrome Canari v35+ prend en charge la dernière version du sélecteur, désormais appelée /deep/ sélecteur.

Il s'adapte à toutes les frontières et fonctionne également sur les éléments natifs.

Voir: 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

C'est possible, du moins dans Chrome.Si vous cochez Shadow DOM de <input type="date"> tu verras:

<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>

Ensuite, vous pouvez styliser des pseudo-éléments distincts :

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

Selon Rob Dodson lui-même il est possible d'utiliser ^ et ^^ sélecteurs pour styliser le Shadow DOM natif.Donc cette règle devrait fonctionner (Chrome Canary, je crois) :

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