FireFox/Safari Shadow DOM中Event target与current target差异及标准用法问询

核心结论 #

用currentTarget完全符合标准，也是Web Component开发者处理这类场景的常规操作。

1. 标准层面的合理性 #

currentTarget的标准定义就是事件监听器注册的元素，不管事件在Shadow DOM内部怎么冒泡，只要你的监听器是挂在<abc-toggle>这类自定义元素上的，currentTarget就铁定指向这个自定义元素实例——这是DOM Events规范明确规定的，所有浏览器都得遵守，不存在兼容性坑。

2. 为什么Chrome和Firefox/Safari的target不一样？ #

这是不同浏览器对Shadow DOM事件**重定向（event retargeting）**的实现细节差异：

• Chrome在<label>点击事件冒泡到Light DOM时，会保留target指向Shadow DOM内的<label>；
• Firefox和Safari则严格遵循Shadow DOM的封装设计，把target重定向为自定义元素本身，避免外部代码直接访问Shadow DOM内部的私有元素（其实这才更符合Shadow DOM的设计初衷）。

3. 为什么currentTarget是你的最优解？ #

你的场景里，真正需要的是触发事件的那个自定义元素实例，而不是它内部的<label>或<input>。用currentTarget可以直接跳过内部元素的事件干扰，不管浏览器怎么处理重定向，结果都是一致的——完美避开了跨浏览器的target差异问题。

4. 其他开发者的实践情况 #

这绝对是Web Component圈里的常规操作，比如Lit、Fast Element这类主流框架的官方示例中，只要涉及到自定义元素的外部事件监听，都会优先用currentTarget来获取元素实例，尤其是需要忽略Shadow DOM内部事件细节的场景。

额外提醒 #

如果确实要操作Shadow DOM内部的元素，应该在自定义元素内部注册监听器处理，别在外部用target去穿透Shadow DOM——这既违反了封装性，还会给自己挖跨浏览器兼容的坑。

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