检查HTML5日期选择器阴影DOM [英] Inspect HTML5 date picker shadow DOM

问题描述

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

I'm trying to inspect the shadow DOM for certain HTML5 controls, like the date picker for the input type="date" and the actual suggestion dropdown list for inputs bound to a datalist. Preferably in Chrome, but other browsers will do too.

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

I've found that by enabling the Shadow DOM setting in Chrome's inspector options allows me to inspect the shadow DOM for the actual input (which includes the ::-webkit-calendar-picker-indicator arrow to show the datepicker) but not the datepicker itself:

datalist也是如此.这些控件似乎不是输入的一部分，但在元素面板的其他任何地方也找不到它们.

The same goes for the datalist. It appears as these controls are not part of the input, but I also can't find them anywhere else in the elements panel.

是否可以检查这些元素?

Is it possible to inspect such elements?

为澄清起见，请进行小的我实际上是在寻找将哪些伪类应用于哪些控件.有很多站点列出了其中的一些站点，但是我还没有找到设法为datalist元素列出::-webkit-calendar-picker-indicator的资源，但确实得到了应用.我正在寻找更多那些狡猾的混蛋，当然，最好的来源当然是马的嘴巴.

Small edit for clarification: I'm actually looking for which pseudo-classes apply to which controls. There's plenty of sites that list some of them, but I have yet to find a source that manages to list ::-webkit-calendar-picker-indicator for the datalist element, which does get applied. I'm looking for more of those sneaky bastards, and the best source for that of course is the horse's mouth.

推荐答案

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

Looks like the actual picker is loaded in an entirely different layer (basically a different window without the titlebar). So I guess the answer is: no, you can't.

我同意能够对其进行自定义非常好.还有类似的弹出窗口. XUL中的Mozilla具有display:popup，上下文菜单，弹出菜单和类似内容均使用display:popup.能够在用户态内容中使用它肯定也很棒.

I agree it would be great to be able to customize it. And similar popups too. Mozilla in XUL has display:popup which is used by context menus, flyout and similar things. Would be definitely great being able to use that in userland content too.

这篇关于检查HTML5日期选择器阴影DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！