This question is more aimed at user-created shadow DOM elements, but for accessibility I'll use the
You can, however, expose hooks for CSS to access the internals of your Shadow DOM without using Custom Elements. There are two ways to do that:
Chrome and Firefox expose certain parts of their Shadow DOM to CSS through special pseudo-elements. Here's your example of the
date input with the addition of a CSS rule that only applies to the numerical part of the date field through use of the Chrome-provided
Here's a partial list of the available WebKit pseudo-elements. You can also just enable the
Show Shadow DOM option in DevTools and look for attributes named
Component authors can also create their own pseudo-elements to expose parts of their Shadow DOM (see the 2nd example here).
An even better way is to use CSS Variables, which you can enable with
Enable experimental WebKit features in
about:flags in Chrome. Then check out this fiddle which uses CSS Variables to communicate to the Shadow DOM what color it should use for its "theme."