自定义元素通过 dispatchEvent 派发 bubbles: true 的 CustomEvent，数据置于 detail 字段，父级用 addEventListener 或框架语法（如 Vue @事件名、React onDataUpdated）监听；关键点：必须冒泡、细节放 detail、事件名用短横线。

自定义元素（Custom Elements）本身是原生 Web Components 规范的一部分，不依赖 Vue 或 React。它通过 dispatchEvent 派发自定义事件，父级组件（无论是否为 Vue、React 或纯 HTML）都可通过 addEventListener 监听。关键在于：事件必须是 冒泡的 CustomEvent，且数据通过 detail 属性传递。

定义可派发事件的自定义元素

在自定义元素类中，调用 this.dispatchEvent(new CustomEvent('事件名', { detail: 数据, bubbles: true })) 即可向父级冒泡派发携带数据的事件。

• 必须设置 bubbles: true，否则事件无法穿透 Shadow DOM 或到达外层父容器
• 数据统一放在 detail 字段中，这是 CustomEvent 的标准约定，兼容所有框架监听逻辑
• 事件名建议用短横线格式（如 data-updated），避免与原生事件冲突

在 Vue 父组件中监听自定义事件

Vue 模板中直接用 @事件名（注意不是 @update:data 这类 Vue 特有语法），Vue 会自动绑定原生事件监听器。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 例如：
• 方法中通过 $event.detail 获取数据：handleUpdate(e) { console.log(e.detail.value) }
• 若需 v-model 绑定，可在自定义元素内监听 input/change 并派发 input 事件，同时设置 value property —— 这样 Vue 的 v-model 会自动识别

在 React 或纯 HTML 父级中监听

React 使用 onDataUpdated（驼峰命名）或原生 addEventListener；纯 HTML 直接写 ondataupdated 属性或 JS 监听。

• React 示例： setVal(e.detail.value)} />
• HTML 示例：
• 注意：React 对小写短横线事件名不自动转换，推荐用 addEventListener 更稳妥

常见问题排查点

派发失败通常不是语法错误，而是细节遗漏：

• 忘记加 bubbles: true，导致事件被截断在 Shadow DOM 内
• 把数据塞进 event.data 或其他字段，而非标准的 detail
• 父级监听的是子元素内部节点（如按钮），而不是自定义元素标签本身
• 事件名大小写不一致（dataChange 和 data-change 是不同事件）