如何在输入字段中与浏览器插入的 Shadow DOM 内容进行交互？

Question

目前我正在尝试设置一个函数，该函数将单击<input type=time>内的小时钟，但无法找到标签的 innerHTML 以找到时钟。

这就是我想要做的：

html

<input id='timeInput' type='time'/>

JS

document.getElementById("timeInput").children('clockIcon').click()

但是当我运行document.getElementById('timeInput').innerHTML时，我得到空值。

我认为这与 Shadow DOM 有关，但一直无法找到有关 shadow DOM 输入的信息。

我以前能够检查隐藏的浏览器 HTML，但无法找到以前的资源。 有任何想法吗？

具体来说，我的应用程序仅在 Chrome 和 Opera 浏览器上显示，因为它是 Chrome 扩展程序。

Answer 1

无法与影子 DOM 交互。 影子树的全部目的是将功能、行为和样式与外界隔离——即使模式是“开放的”。 如果特定组件的作者希望您能够控制行为或样式，他们将为此提供 API。 如果作者没有为它提供 API，他们不希望你乱用它。

在使用表单字段时，我的经验法则是始终遵循以下规则之一：

使用浏览器表单域——不要太花哨，因为你可能会破坏可访问性、键盘导航、自动填充和其他你不打算破坏的东西。 除了设置边框、背景和内边距之外的任何东西通常都不是一个好主意。 您可能会认为是这样，但我可能会通过展示您如何破坏某些默认行为来证明您错了。

例如，自动显示时间选择器会使注意力从用户正在做的事情上转移开。 也许屏幕阅读器正在阅读一些文本，或者高级用户正在使用他们的键盘在导航中切换，然后突然他们在他们不想成为的时间选择器上。

使用经过广泛测试的 UI 库。 流行的 UI 库的作者已经考虑了所有的行为等，以便为用户提供流畅和可预测的体验。 当您想要执行诸如自动显示日期/时间选择器或其他一些您可能不应该做但无论如何都会去做的花哨行为时，请使用这些。

无论您做什么，都不要尝试滚动您自己的精美表单控件。 我保证你会惹恼你的一位用户。

Answer 2

如果你想在 Chrome DevTools 中查看 shadowDom，你必须在 Elements 部分的 Settings 中打开它。 除了通过元素属性和事件处理程序之外，您不能以编程方式与元素交互。

这应该使 shadowroot 可见

您可以将更改和输入以及事件侦听器添加到组件本身，但不能添加到 shadowDom 的元素。

Answer 3

有一种方法可以用纯 js 与开放的 shadow dom 进行交互，比如点击

例子：

document.querySelector("shadowRootsCss").shadowRoot.querySelector("#timeInput").click()

如果您使用谷歌浏览器，检查并找到该元素，在该元素上，单击：复制 js 路径

然后，您将获得需要单击的路径