javascript - Is it possible to access Shadow DOM elements through the parent document? -

this question more aimed @ user-created shadow dom elements, accessibility i'll use date input type question:

say example have date input on page. couple of bits edited out, shadow dom markup (using chrome) looks like:

<input type="date">     #document-fragment         <div pseudo="-webkit-datetime-edit">             <div pseudo="-webkit-datetime-edit-fields-wrapper">                 <span role="spinbutton">dd</span>                 <div pseudo="-webkit-datetime-edit-text">/</div>                 <span role="spinbutton">mm</span>                 <div pseudo="-webkit-datetime-edit-text">/</div>                 <span role="spinbutton">yyyy</span>             </div>         </div>         <div></div>         <div pseudo="-webkit-calendar-picker-indicator"></div> 

the methods , properties associated date input not appear reference shadow dom @ (jsfiddle), wondering how (if @ all) can these shadow dom elements accessed?

int32_t right in shadow dom, definition, way fill node dom want hide external sources (encapsulation). point component author choose parts exposed outside css or javascript , not.

unfortunately, cannot create public javascript interface shadow dom without using bleeding-edge spec called custom elements. if choose that, it's simple adding custom public methods element's prototype. these can access internals of shadow dom (see third example here).

you can, however, expose hooks css access internals of shadow dom without using custom elements. there 2 ways that:

1. pseudo-elements
2. css variables

pseudo-elements

chrome , firefox expose parts of shadow dom css through special pseudo-elements. here's example of date input addition of css rule applies numerical part of date field through use of chrome-provided -webkit-datetime-edit pseudo-element.

here's partial list of available webkit pseudo-elements. can enable show shadow dom option in devtools , attributes named pseudo.

component authors can create own pseudo-elements expose parts of shadow dom (see 2nd example here).

css variables

an better way use css variables, can enable enable experimental webkit features in about:flags in chrome. check out this fiddle uses css variables communicate shadow dom color should use "theme."