title: Is it possible to access Shadow DOM elements through the parent document?
body: <p>This question is more aimed at user-created shadow DOM elements, but for accessibility I'll use the <code>date</code> input type for this question:</p>
  
  <p>Say for example I have a <code>date</code> input on my page. With a couple of bits edited out, the shadow DOM markup for this (using Chrome) looks something like:</p>
  
  <pre><code>&lt;input type="date"&gt;
      #document-fragment
          &lt;div pseudo="-webkit-datetime-edit"&gt;
              &lt;div pseudo="-webkit-datetime-edit-fields-wrapper"&gt;
                  &lt;span role="spinbutton"&gt;dd&lt;/span&gt;
                  &lt;div pseudo="-webkit-datetime-edit-text"&gt;/&lt;/div&gt;
                  &lt;span role="spinbutton"&gt;mm&lt;/span&gt;
                  &lt;div pseudo="-webkit-datetime-edit-text"&gt;/&lt;/div&gt;
                  &lt;span role="spinbutton"&gt;yyyy&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div pseudo="-webkit-calendar-picker-indicator"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The methods and properties associated with the <code>date</code> input do not appear to reference the shadow DOM at all (<a href="http://jsfiddle.net/6y9XT/2/" rel="noreferrer">JSFiddle</a>), so I was wondering how (if at all) can these shadow DOM elements be accessed?</p>