检查 HTML5 日期选择器阴影 DOM

Posted 2023-03-05

【中文标题】检查 HTML5 日期选择器阴影 DOM

【英文标题】：Inspect HTML5 date picker shadow DOM

【发布时间】：2015-07-02 18:31:37

【问题描述】：

我正在尝试检查某些 html5 控件的影子 DOM，例如 input type="date" 的日期选择器和绑定到 datalist 的输入的实际建议下拉列表。最好在 Chrome 中，但其他浏览器也可以。

我发现，通过在 Chrome 的检查器选项中启用 Shadow DOM 设置，我可以检查影子 DOM 中的实际 input（其中包括用于显示日期选择器的 ::-webkit-calendar-picker-indicator 箭头），但不能检查日期选择器本身：

datalist 也是如此。看起来这些控件不是输入的一部分，但我也无法在元素面板的其他任何地方找到它们。

是否可以检查这些元素？

澄清的小编辑：我实际上是在寻找哪些伪类适用于哪些控件。有很多网站列出了其中的一些，但我还没有找到一个可以为datalist 元素列出::-webkit-calendar-picker-indicator 的源，它确实被应用了。我正在寻找更多那些鬼鬼祟祟的混蛋，而最好的来源当然是马嘴。

【参考方案1】：

看起来实际的选择器加载在一个完全不同的层中（基本上是一个没有标题栏的不同窗口）。所以我想答案是：不，你不能。

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

【讨论】：

太遗憾了，谢谢。我真的什至不想定制它，而只是检查它的结构并查看应用了哪些伪类。

【参考方案2】：

Google Chrome 的日历弹出窗口不在 Shadow DOM 中。 它位于映射到弹出窗口的单独页面中。见WebPagePopupImpl.cpp

并且弹出的内容是written by HTML/javascript。

【讨论】：

有趣！我似乎在您链接的源代码中唯一找不到的是它所构建的 HTML。在我能看到的所有东西中，使用的伪类似乎不见了。它们是否出现在代码中的任何位置？