Ispezione dell'ora di selezione della data HTML5 DOM

Question

Sto cercando di ispezionare il DOM ombra per determinati controlli HTML5, come il selettore di date per lo input type="date" e l'elenco a discesa dei suggerimenti effettivi per gli ingressi associati a datalist. Preferibilmente in Chrome, ma lo faranno anche altri browser.

Ho scoperto che attivando l'impostazione Ombra DOM nelle opzioni ispettore di Chrome mi permette di ispezionare il DOM ombra per l'attuale input (che comprende la freccia ::-webkit-calendar-picker-indicator per mostrare la DatePicker), ma non il datepicker stesso:

Lo stesso vale per lo datalist. Sembra che questi controlli non facciano parte dell'input, ma non posso trovarli da nessun'altra parte nel pannello degli elementi.

È possibile ispezionare tali elementi?

Piccola modifica per chiarimenti: attualmente sto cercando le pseudo-classi applicabili a quali controlli. Ci sono molti siti che ne elencano alcuni, ma devo ancora trovare una fonte che riesca a elencare ::-webkit-calendar-picker-indicator per l'elemento datalist, che viene applicato. Sto cercando più di quei bastardi furtivi, e la fonte migliore per questo è ovviamente la bocca del cavallo.

Answer 1

Sembra che il picker effettivo sia caricato in un livello completamente diverso (fondamentalmente una finestra diversa senza la barra del titolo). Quindi immagino che la risposta sia: no, non puoi.

Sono d'accordo che sarebbe bello essere in grado di personalizzarlo. E anche popup simili. Mozilla in XUL ha display:popup che viene utilizzato dai menu contestuali, flyout e cose simili. Sarebbe sicuramente fantastico poterlo usare anche nel contenuto degli utenti.

Answer 2

Il popup del calendario di Google Chrome non è in DOM ombra. Si trova in una pagina separata mappata a una finestra popup. Vedi WebPagePopupImpl.cpp

E il contenuto popup è written by HTML/JavaScript.