如何与<input type=time>中浏览器内置Shadow DOM的时钟图标交互

问题根因 #

• <input type="time"> 属于浏览器原生替换元素，内部的时钟图标、选择面板都由浏览器内置的用户代理Shadow DOM渲染，该Shadow DOM不对外开放，普通JS无法直接访问内部节点，因此读取innerHTML会返回空，也无法直接获取内部的时钟元素绑定点击事件。
• 如需在开发者工具查看该Shadow DOM结构，可打开元素面板右上角设置，勾选「Show user agent shadow DOM」即可看到隐藏的内部结构，但仅支持查看，无法通过JS操作。

可行实现方案（仅兼容Chrome/Opera） #

方案1：使用原生showPicker() API（推荐） #

Chrome 99及以上、Opera 86及以上版本支持HTMLInputElement的原生showPicker()方法，调用后可以直接唤起时间选择面板，和点击时钟图标效果完全一致：

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

// 直接调用即可唤起选择器
document.getElementById('timeInput').showPicker()

注意：Chrome安全策略要求showPicker()必须在用户交互上下文（比如点击、键盘事件回调）中调用，非用户触发的自动调用会被拦截报错。如果是Chrome扩展的content script中使用，满足用户手势触发的条件即可正常执行。

方案2：模拟点击输入框右侧区域（兼容旧版Chrome） #

如果需要兼容更低版本的Chrome，可以通过模拟点击输入框右侧图标的对应坐标区域实现效果：

const timeInput = document.getElementById('timeInput')
const rect = timeInput.getBoundingClientRect()
// 点击输入框右侧10px位置，对应时钟图标区域
const clickEvent = new MouseEvent('mousedown', {
  clientX: rect.right - 10,
  clientY: rect.top + rect.height / 2,
  bubbles: true
})
timeInput.dispatchEvent(clickEvent)

内容的提问来源于stack exchange，提问作者pythonNovice