¿Aplicar estilos a los elementos propios de los navegadores, al ShadowDOM nativo?

Question

Luego de una charla de Rob Dodson sobre Componentes Web, donde mencionó el flamante "gato" ^^ y "sombrero" ^ Selectores de CSS, he preguntado sobre las posibilidades de aplicar estilos no solo al ShadowDOM de un elemento personalizado, sino también al ShadowDOM de los elementos nativos del navegador.

¿Es posible diseñar elementos de ShadowDOM?¿En qué navegadores y cómo?El único artículo relevante que encontré fue el de Dimitry Glazkov sobre '¿Qué diablos es Shadow DOM?', donde presenta cómo llegar a los subárboles de ShadowDOM mediante el uso de pseudo selectores y -webkit-appearance: none; normas.

Answer 1

Debido al estado del proyecto de Módulo de alcance CSS Nivel 1 Al poder cambiar en cualquier momento, mi enfoque original no funcionó por mucho tiempo.

En Cromo v33+ tendrás que girar Enable Experimental Web Platform Features en chrome://flags activado para que funcione el siguiente código.

---

Empezando con Chrome canario v33 y su selector de gato ^^ la respuesta es: ¡Sí!
Actualización 2014-03-30: Chrome Canario v35+ admite la versión más nueva del selector, ahora el llamado /deep/ selector.

Estiliza más allá de todos los límites y también funciona con elementos nativos.

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

Es posible, al menos en Chrome.Si revisa la sombra DOM del <input type="date">, verá:

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

Luego, puedes diseñar pseudo-elementos separados:

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

Según Rob Dodson mismo, es posible usar ^ y los selectores de ^^ para diseñar la sombra nativa DOM.Así que esta regla debería funcionar (CHROMADOS CANARIO, CREO):

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