javascript - Web 组件中的触发事件

Question

我试图从 web 组件中引发事件，但确实如此。

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

html-tag "hello"都不会引发事件，事件监听器也不会。
Web 组件如下所示:

var button=document.createElement("button");
button.innerHTML=cap;
button.addEventListener('click', () => {
    console.log("click");
        
    button.dispatchEvent(new CustomEvent("hello", {
        detail: { name: "John" }
    }));
});
    
shadow.appendChild(button);

谁能帮我找出错误？
非常感谢。
代码 fiddle : https://jsfiddle.net/b43uqsLp/2/

Answer 1

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

按钮 click听众是 里面 shadowDOM，所以 composed没用

默认监听器，如 click是 不是 由 shadowDOM

停止

!!! 自定义事件需要 两个 composed:true和 bubbles:true使用“打开”shadowDOM 转义自定义元素。

不要在 connectedCallback 中附加监听器除非你 100% 确定这是你想要的； connectedCallback在文档中移动 DOM 元素时再次运行

super()返回 和 设置 'this' 和 attachShadow()返回 和 设置this.shadowRoot引用，无需使用自己的变量。
首先运行 super 意味着您在创建之前无法访问“this”；但是你可以运行任何你想要的 JS 之前 super() 调用

这个 JSFiddle: https://jsfiddle.net/CustomElementsExamples/qody0u4n/
显示 composed和 bubbles行为，在 document 上有额外的听众

  document.addEventListener("click", (evt) => log(evt, 'document'));
  document.addEventListener("MyEvent", (evt) => log(evt, 'document'));

<my-component id=ONE></my-component>
<my-component id=TWO composed>
    <my-component id=INSIDETWO composed></my-component>
</my-component>
<my-component id=THREE composed bubbles>
    <my-component id=INSIDETHREE composed bubbles></my-component>
</my-component>

笔记

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

文档只接收CustomEvent("MyEvent")当两者 composed和 bubbles被设置

composed事件发生不停在 shadowRoot 边界!它在 停止。自定义元素边界 .在 JSfiddle 中还有额外的 DOMlisteners在 my-component来证明这一点。

另见: https://pm.dartus.fr/blog/a-complete-guide-on-shadow-dom-and-event-propagation/