Javascript web组件中的激发事件

我试图通过网络组件来引发事件，但事实确实如此

<my-component id="xyz" bez="hallo" hello="myScript()"></my-component>
<script>
    xyz.addEventListener("hello", function(event) {
        console.log(event.detail.name);
    });
</script>

谁能帮我找出错误吗？ 非常感谢

---

这里的代码Fiddle:

问题发生的原因是（尝试检查您的组件，您将了解我的意思）：

好消息是，修复非常简单-只需通过CustomEvent选项中的

composited:true

属性将事件跨阴影DOM传播到常规DOM即可：

button.dispatchEvent(new CustomEvent("hello", {
    detail: { name: "John" },
    composed: true // Like this
}));

---

这是。

另一个答案中缺少一些信息

• 按钮

  click

  listener位于阴影区内，因此

  合成的
  没有任何用处

• 默认侦听器（如

  click

  ）不会被shadowDOM停止
• CustomEvents要求组合：true和

  气泡：true

  以使用“打开”阴影域转义自定义元素
• 不要在

  connectedCallback

  中附加侦听器，除非您100%确定这是您想要的；在文档中移动DOM元素时，

  connectedCallback

  将再次运行

• super（）

  返回并设置“this”，而

  attachShadow（）

  返回并设置

  this.shadowRoot

  引用，无需使用自己的变量。
  先运行超级意味着在创建“this”之前无法访问它；但是在调用super（）之前，您可以运行任何想要的JS

本节：

显示合成的

和
气泡
行为，在
文档上有额外的侦听器

document.addEventListener（“单击”（evt）=>log（evt，“文档”）；
document.addEventListener（“MyEvent”（evt）=>log（evt，“document”）；



注释


没有一个MyEvents被元素1或文档捕获


当组合的
和泡泡的
都被设置时，文档仅接收
CustomEvent（“MyEvent”）


合成的
事件不会在阴影根边界处停止！它在自定义图元边界处停止。在JSfiddle中，在
mycomponent
上有额外的
domalisteners
来演示这一点





另请参见：
非常感谢您的详细解释
button.dispatchEvent(new CustomEvent("hello", {
    detail: { name: "John" },
    composed: true // Like this
}));