title: Inspect HTML5 date picker shadow DOM
body: <p>I'm trying to inspect the shadow DOM for certain HTML5 controls, like the date picker for the <code>input type="date"</code> and the actual suggestion dropdown list for inputs bound to a <code>datalist</code>. Preferably in Chrome, but other browsers will do too.</p>
  
  <p>I've found that by enabling the Shadow DOM setting in Chrome's inspector options allows me to inspect the shadow DOM for the actual <code>input</code> (which includes the <code>::-webkit-calendar-picker-indicator</code> arrow to show the datepicker) but not the datepicker itself: </p>
  
  <p><img src="https://i.stack.imgur.com/De7Fx.png" alt="enter image description here"></p>
  
  <p>The same goes for the <code>datalist</code>. It appears as these controls are not part of the input, but I also can't find them anywhere else in the elements panel.</p>
  
  <p>Is it possible to inspect such elements?</p>
  
  <p>Small edit for clarification: I'm actually looking for which pseudo-classes apply to which controls. There's plenty of sites that list some of them, but I have yet to find a source that manages to list <code>::-webkit-calendar-picker-indicator</code> for the <code>datalist</code> element, which does get applied. I'm looking for more of those sneaky bastards, and the best source for that of course is the horse's mouth.</p>