javascript - 如何与输入字段中浏览器插入的 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，他们不希望您随意使用它。

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

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

For example, automatically displaying a time picker would take focus away from what the user was doing. Maybe the screen reader was reading some text, or a power user was tabbing through the navigation using their keyboard, and then all the sudden they're on the time picker when they didn't want to be.

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

无论您做什么，都不要尝试自己制作花哨的表单控件。我保证您会激怒您的一位用户。