检查HTML5日期选择器影子DOM

Question

我正在尝试检查某些HTML5控件的shadow DOM,比如input type="date"绑定到a的输入的日期选择器和实际建议下拉列表datalist.最好是在Chrome中,但其他浏览器也会这样做.

我发现通过在Chrome的检查器选项中启用Shadow DOM设置,我可以检查实际的阴影DOM input(包括::-webkit-calendar-picker-indicator显示日期选择器的箭头),但不检查datepicker本身:

同样适用于datalist.看起来这些控件不是输入的一部分,但我也无法在元素面板中的任何其他位置找到它们.

有可能检查这些元素吗？

小编辑澄清:我实际上在寻找哪些伪类适用于哪些控件.有很多,列出其中一些网站,但是我还没有找到它成功地列出源::-webkit-calendar-picker-indicator的datalist元素,这也得到应用.我正在寻找更多那些偷偷摸摸的混蛋,当然最好的来源是马的嘴巴.

Answer 1

看起来实际的选择器加载在一个完全不同的层(基本上是一个没有标题栏的不同窗口).所以我猜答案是:不,你不能.

我同意能够自定义它会很棒.和类似的弹出窗口一样.XUL中的Mozilla有display:popup上下文菜单,弹出窗口和类似的东西使用.能够在用户区内容中使用它肯定会很棒.

Answer 2

Google Chrome的日历弹出窗口不在Shadow DOM中.它位于一个映射到弹出窗口的独立页面中.请参阅WebPagePopupImpl.cpp

弹出内容由HTML/JavaScript编写.