Web Components：Slot绑定Click的两种方式差异与自定义事件composed疑问

核心原因是两种写法中dispatchEvent的调用主体（即this指向）完全不同，跟箭头函数本身无关，是箭头函数帮你锁定了自定义元素的this。

拆解两种绑定逻辑 #

1. 代码片段1中「无效」的写法 #

mySlot.addEventListener('click', this.#handleClick); // 无效

当slot内的元素被点击时，click回调的this是触发点击的light DOM元素（比如slot里的按钮），而非你的自定义元素实例。此时#handleClick里的this.dispatchEvent(...)是在这个light DOM元素上派发事件：

• 自定义事件默认bubbles: false、composed: false
• 事件被限制在该light DOM元素的上下文内，无法穿透到外部的自定义元素，自然监听不到。

2. 代码片段1中「有效」的箭头函数写法 #

mySlot.addEventListener('click', () => this.#handleClick()); // 有效

箭头函数没有独立的this，它的this继承自外层的slotchange回调（而slotchange绑定在自定义元素的slot上，外层this就是自定义元素实例）。此时调用#handleClick()时：

• 函数内的this是自定义元素本身
• 事件直接在你外部监听的myCustomElement实例上派发，完全没涉及shadow DOM边界穿越，所以不需要bubbles和composed配置，监听器直接能捕获到事件。

3. 代码片段2的「有效」写法 #

mySlot.addEventListener('click', this.#handleClick); // 有效

这里回调的this依然是slot内的light DOM元素，但#handleClick里的事件配置了{bubbles: true, composed: true}：

• bubbles: true让事件可以向上冒泡
• composed: true允许事件穿透shadow DOM边界进入light DOM上下文
• 事件从slot内元素一路冒泡到自定义元素，最终被外部监听器捕获。

总结 #

• 箭头函数写法的本质是让事件直接派发给自定义元素实例，没有跨shadow DOM的需求，所以无需额外配置。
• 直接绑定方法的写法，事件是在slot内的子元素上派发的，必须靠bubbles+composed才能穿透到外部上下文。

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