CustomEvent 是浏览器原生事件构造器，需通过 new CustomEvent() 创建并设置 detail 携带结构化数据，调用 dispatchEvent() 显式触发，addEventListener 监听时通过 event.detail 读取；必须注意 bubbles、composed 配置及监听清理。
自定义元素（Custom Elements）本身不自动触发自定义事件，必须显式调用 dispatchEvent() 才能发出事件；它和普通 DOM 元素一样，事件名区分大小写、detail 是唯一推荐的数据载体，且不能靠 HTML 属性（如 onmyevent）绑定监听器。
CustomElement 内部如何 dispatch 自定义事件
在 connectedCallback、attributeChangedCallback 或其他逻辑中，你想通知外部“我准备好了”或“数据变了”，就得手动创建并分发事件。关键不是“能不能发”，而是“在哪发、怎么发才被外部收到”。
- 目标元素必须是当前自定义元素实例本身（
this.dispatchEvent(...)），不能随便选个document或body——除非你明确想广播给全局 - 事件名必须全小写、用连字符分隔（如
data-ready），写成DataReady或dataReady都不会匹配到监听器 -
detail字段必须存在且为对象（哪怕空对象{}），传字符串或null会导致监听方取不到结构化数据 - 如果希望父组件能捕获该事件，
bubbles: true不可少；否则事件只停留在自定义元素自身，祖先节点监听不到
示例（在自定义元素类内部）：
class UserCard extends HTMLElement {
connectedCallback() {
const evt = new CustomEvent('user-loaded', {
detail: { id: this.dataset.userId, name: 'Alice' },
bubbles: true,
cancelable: false
});
this.dispatchEvent(evt); // 注意：是 this，不是 document 或别的元素
}
}
外部如何监听 CustomElement 的自定义事件
监听必须挂载在**自定义元素实例本身**，或其**祖先节点**（前提是事件设置了 bubbles: true）。不能指望在子元素上监听父元素发出的事件，除非冒泡路径完整。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 监听时机很重要：必须在元素插入 DOM 后、事件触发前注册监听器。如果先
dispatchEvent再addEventListener，事件就丢了 - 不要用内联属性（如
<user-card onuser-loaded="handle()">）——浏览器完全忽略，不解析也不绑定 - 监听时事件名要和 dispatch 时**完全一致**，包括大小写和连字符：
'user-loaded'≠'userLoaded'≠'UserLoaded' - 监听函数参数里的
event.detail就是你传进去的对象，直接解构即可：event.detail.id、event.detail.name
正确写法：
const el = document.querySelector('user-card');
el.addEventListener('user-loaded', (e) => {
console.log('用户加载完成:', e.detail.id, e.detail.name);
});
为什么 customElements.define() 后事件仍不触发
最常见原因不是代码写错，而是生命周期没走到那一步：自定义元素只有在**首次插入 active DOM 树**时才会执行 connectedCallback，而事件通常是在这个回调里 dispatch 的。
-
customElements.define('user-card', UserCard)只是注册类，不触发任何回调 - 写了
<user-card></user-card>但 JS 还没执行 define —— 浏览器当未知标签处理，connectedCallback永远不会调 - 用
document.createElement('user-card')创建了实例，但没appendChild()到文档中 —— 它不在 DOM 树里，connectedCallback不会运行 - 框架（如 React、Vue）动态渲染自定义元素时，可能绕过原生插入流程，导致生命周期不触发；此时需手动调用
dispatchEvent或改用属性/事件混合通信
真正容易被忽略的是：CustomElement 的事件通信依赖 DOM 插入时序，而不是类定义顺序或 HTML 标签书写顺序；一旦漏掉插入动作或 define 时机错位，整个事件链就断了，且没有任何报错提示。
