如何与输入字段中浏览器插入的 Shadow DOM 内容进行交互？
How can I interact with browser-inserted Shadow DOM content in an input field?
目前我正在尝试设置一个功能，该功能将点击 <input type=time> 内部的小时钟，但无法找到标签的内部 HTML 以找到时钟。
这就是我想要做的：
html
<input id='timeInput' type='time'/>
JS
document.getElementById("timeInput").children('clockIcon').click()
但是当我 运行 a document.getElementById('timeInput').innerHTML 我得到空值。
我相信这与阴影DOM有关，但一直无法找到有关阴影DOM输入的信息。
我以前能够检查隐藏的浏览器 HTML，但我无法找到以前的资源。有什么想法吗？
具体来说，我的应用程序仅在 Chrome 和 Opera 浏览器上显示，因为它是 Chrome 扩展程序。
无法与影子互动DOM。影子树的全部目的是将功能、行为和样式与外界隔离——即使模式是“开放的”。如果特定组件的作者希望您能够控制行为或样式，他们会为此提供 API。如果作者没有为它提供 API，他们不想让你乱用它。
在使用表单字段时，我的经验法则是始终遵循以下规则之一：
- 按原样使用浏览器表单域 - 不要尝试太花哨，因为您可能会破坏可访问性、键盘导航、自动填充和其他您不打算破坏的功能。除了设置边框、背景和内边距的样式外，通常都不是一个好主意。您可能认为是，但我可能会通过展示您如何破坏某些默认行为来证明您是错误的。
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.
- 使用经过广泛测试的 UI 库。流行的 UI 库的作者已经考虑了所有行为，以便为用户提供流畅且可预测的体验。当你想做一些事情时使用这些，比如自动显示一个 date/time 选择器或一些你可能不应该做但无论如何都会去做的奇特行为。
无论您做什么，都不要尝试自己制作花哨的表单控件。我保证你会激怒你的一个用户。
如果您想在 Chrome DevTools 中查看 shadowDom，您必须在“元素”部分的“设置”中将其打开。除非通过元素属性和事件处理程序，否则无法以编程方式与元素交互。
这应该使 shadowroot 可见
您可以向组件本身添加更改、输入和事件侦听器，但不能向 shadowDom 的元素添加。
有一种方法可以用纯 js 与打开的影子 dom 交互，比如点击
示例：
document.querySelector("shadowRootsCss").shadowRoot.querySelector("#timeInput").click()
如果您使用 google chrome，请检查并找到该元素，在该元素上单击：复制 js 路径
然后你就会有你需要点击的路径
目前我正在尝试设置一个功能，该功能将点击 <input type=time> 内部的小时钟，但无法找到标签的内部 HTML 以找到时钟。
这就是我想要做的：
html
<input id='timeInput' type='time'/>
JS
document.getElementById("timeInput").children('clockIcon').click()
但是当我 运行 a document.getElementById('timeInput').innerHTML 我得到空值。
我相信这与阴影DOM有关，但一直无法找到有关阴影DOM输入的信息。
我以前能够检查隐藏的浏览器 HTML，但我无法找到以前的资源。有什么想法吗？
具体来说，我的应用程序仅在 Chrome 和 Opera 浏览器上显示，因为它是 Chrome 扩展程序。
无法与影子互动DOM。影子树的全部目的是将功能、行为和样式与外界隔离——即使模式是“开放的”。如果特定组件的作者希望您能够控制行为或样式，他们会为此提供 API。如果作者没有为它提供 API，他们不想让你乱用它。
在使用表单字段时，我的经验法则是始终遵循以下规则之一：
- 按原样使用浏览器表单域 - 不要尝试太花哨，因为您可能会破坏可访问性、键盘导航、自动填充和其他您不打算破坏的功能。除了设置边框、背景和内边距的样式外，通常都不是一个好主意。您可能认为是，但我可能会通过展示您如何破坏某些默认行为来证明您是错误的。
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.
- 使用经过广泛测试的 UI 库。流行的 UI 库的作者已经考虑了所有行为，以便为用户提供流畅且可预测的体验。当你想做一些事情时使用这些，比如自动显示一个 date/time 选择器或一些你可能不应该做但无论如何都会去做的奇特行为。
无论您做什么，都不要尝试自己制作花哨的表单控件。我保证你会激怒你的一个用户。
如果您想在 Chrome DevTools 中查看 shadowDom，您必须在“元素”部分的“设置”中将其打开。除非通过元素属性和事件处理程序，否则无法以编程方式与元素交互。
这应该使 shadowroot 可见
您可以向组件本身添加更改、输入和事件侦听器，但不能向 shadowDom 的元素添加。
有一种方法可以用纯 js 与打开的影子 dom 交互，比如点击
示例：
document.querySelector("shadowRootsCss").shadowRoot.querySelector("#timeInput").click()
如果您使用 google chrome，请检查并找到该元素，在该元素上单击：复制 js 路径
然后你就会有你需要点击的路径