Applicazione degli stili ai propri elementi dei browser, a Shadow Dom nativo?

Question

Dopo un discorso di Rob Dodson sui componenti Web, dove ha menzionato il nuovissimo "Cat" ^^ e "Cappello" ^ CSS Selectors, ho chiesto informazioni sulle possibilità di applicazione degli stili non solo a un elemento personalizzato, maAnche agli elementi nativi del browser 'Shadowdom?

è possibile elementi di stile da Shadowdom?In cui i browser e come? L'unico articolo rilevante che ho trovato è stato di Dimitry Glazkov su " Che diamine è Shadow Dom? ", dove stabilisce il raggiungimento dei sottosuolo shadowdom usando i selettori pseudo e le regole -webkit-appearance: none;.

Answer 1

A causa dello stato della bozza di il livello del modulo SCOPING CSS 1 è in grado di cambiareIn qualsiasi momento, il mio approccio originale non funzionava molto a lungo.

In Chrome V33 + dovrai attivare Enable Experimental Web Platform Features in chrome://flags On per il codice qui sotto per lavorare.

---

.

A partire da Chrome Canary V33 e il suo selettore CAT ^^ La risposta è: Sì!
Aggiornamento 2014-03-30: Chrome Canary V35 + supporta la versione più recente del selettore, ora il cosiddetto Selettore /deep/ .

Stili IT su tutti i confini e funziona anche su elementi nativi.

Vedi: http://codepen.io/volker_e/pen/jshfc

Answer 2

È possibile, almeno in cromo.Se controlli Shadow Dom of <input type="date"> vedrai:

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

.

Allora puoi Style Separare Pseudo-Elements:

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

.

Secondo Rob Dodson è possibile utilizzare ^ e ^^ Seleckes per Style Native Shadow Dom.Quindi questa regola dovrebbe funzionare (Chrome Canary, io credo):

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

.