聚合物、影子 dom、事件和冒泡

Posted 2023-03-13

【中文标题】聚合物、影子 dom、事件和冒泡

【英文标题】：polymer, shadow dom, events and bubbeling

【发布时间】：2018-08-27 20:23:17

【问题描述】：

我有一个使用 shadow dom (v1) 的聚合物自定义元素，该元素位于另一个聚合物自定义元素中，也包裹在 shadow dom 中..

在我的理解中，当最内部的元素引发事件时，最外部的元素（应用程序）应该能够监听这些事件。 这是不正确的吗？

我在应用组件内的评论组件内有一个评级组件。评级组件抛出一个事件：

this.dispatchEvent(new CustomEvent('custom-event'),  bubbles:true, composed:true );

但是，app-component 下面的代码永远不会被触发..

connectedCallback()  
  super.connectedCallback();
  this.addEventListener('custom-event', () =>  console.log('a'););

除非有人停止传播，否则我假设事件最终会从不同的阴影区域一直冒泡到窗口，我是否不正确？

感谢任何答案..

约翰。

【问题讨论】：

如果放在ready() 方法中会触发吗？我问的不是经验，而是查看 Shop 应用程序，其中shop-app 包括shop-cart，其中包括shop-cart-item。后者调度'set-cart-item'，在shop-app的ready()中为其添加了事件监听器。

我有一个解释问题的设置：github.com/JohnGorter/polymerevent

【参考方案1】：

找到它，我将选项设置为 dispatchEvent 的参数，而不是将选项添加到 CustomEvent。

所以而不是

this.dispatchEvent(new CustomEvent("event"),  options );

你必须这样做

this.dispatchEvent(new CustomEvent("event",  options ));