HTML中声明式监听Web Components自定义事件失效问题

HTML声明式监听Web Component的自定义事件完全可行，你的代码无法触发是因为存在语法错误和执行时机问题，具体修复如下：

你的代码中的问题点 #

1. 自定义元素标签错误：<my=web-comp>是笔误，正确写法应为<my-web-comp>
2. 属性引号未闭合：onmyevent="declListener(event)缺少闭合的双引号，导致属性解析失败
3. 脚本执行时机错误：脚本放在<body>之前时，DOM尚未解析完成，document.getElementById("myWebComp")会返回null，编程式监听实际也无法生效（你描述中编程式能触发可能是实际代码位置不同，但示例中存在这个问题）

修正后的完整示例代码 #

<body>
    <!-- 正确的自定义元素标签 + 闭合的声明式监听属性 -->
    <my-web-comp id="myWebComp" onmyevent="declListener(event)"></my-web-comp>
</body>

<script>
    // 定义自定义元素（模拟内部触发自定义事件）
    class MyWebComp extends HTMLElement {
        connectedCallback() {
            // 示例：点击组件时触发自定义事件
            this.addEventListener('click', () => {
                this.dispatchEvent(new CustomEvent('myevent', {
                    bubbles: true,
                    cancelable: true
                }));
            });
        }
    }
    customElements.define('my-web-comp', MyWebComp);

    // 编程式监听（DOM加载完成后执行）
    document.getElementById("myWebComp").addEventListener("myevent", progListener);

    function progListener(event) { 
        console.log("progListener");
    }

    function declListener(event) { 
        console.log("declListener");
    }
</script>

额外注意事项 #

• Shadow DOM场景下的事件穿透：如果你的Web Component使用了Shadow DOM，触发自定义事件时需要设置composed: true，否则外部的声明式/编程式监听器无法捕获到事件：

  // Shadow DOM内部触发事件的写法
  this.shadowRoot.dispatchEvent(new CustomEvent('myevent', {
      bubbles: true,
      composed: true // 允许事件穿透Shadow DOM
  }));
  

• 事件名与属性名的对应：HTML属性不区分大小写，声明式监听的属性名必须是on+小写事件名。比如事件名是myEvent，属性名要写onmyevent，同时触发事件时的名称要保持一致（建议自定义事件名统一用小写）。
• 函数作用域：声明式监听中指定的处理函数必须存在于全局作用域（挂载在window对象上），否则无法被找到执行。

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