不能用customElements.define()重定义原生标签如span或p，因规范强制要求自定义元素名必须含短横线且不可与原生标签名冲突，否则抛DOMException；可行方案是用data-属性标记普通标签并由编辑器统一接管渲染与交互。
不能用 customElements.define() 直接扩展现有 HTML 标签（比如给 <span> 或 <p> 注入自定义行为）——浏览器禁止重定义原生标签，会直接抛出 DOMException: Failed to execute 'define' on 'CustomElementRegistry': "span" is not a valid custom element name。
为什么原生标签不能被 customElements 重定义
这是规范硬性限制：自定义元素名必须包含短横线（-），且不能是已知的 HTML 标签名。试图注册 span、div、p 等都会失败。即使绕过校验强行注入，也会被 DOM 解析器忽略或降级为未知标签，失去语义和原生 API 支持。
常见错误现象：
- 控制台报错
Failed to execute 'define' on 'CustomElementRegistry' - 页面渲染出
<span>但无任何自定义逻辑执行痕迹 - 绑定的
connectedCallback完全不触发
真正可行的替代路径：用 data- 属性 + 手动接管
主流在线编辑器（如 Tiptap、Slate、CodeMirror 插件层）都采用“标记 + 处理”模式，而非尝试劫持原生标签：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 中插入带语义标记的普通标签，例如：
<span data-type="inline-comment" data-id="123">待审核</span> - 编辑器初始化时遍历 DOM，查找所有
[data-type]元素，为其绑定事件、样式、右键菜单等 - 监听
input、keydown、selectionchange，在光标进入/离开该span时动态激活交互态 - 序列化时提取
data-*属性生成结构化数据，而不是依赖 HTML 字符串本身
关键点：contenteditable="false" 必须加在目标 span 上，否则编辑操作会破坏其结构或内容。
如何避免在 contenteditable 区域内触发 DOM 同步冲突
直接操作 contenteditable 内部 DOM 节点极易引发光标跳变、撤销栈断裂、IME 输入异常等问题。安全做法是让编辑器框架统一调度：
- 不要用
innerHTML = ...或appendChild()直接修改编辑区 DOM - 优先使用编辑器提供的 API 插入节点，例如 Tiptap 的
editor.chain().focus().insertContent(...) - 若必须手动操作，应在
requestIdleCallback或setTimeout(..., 0)中延迟执行，并立即调用editor.view.dom.focus()恢复焦点 - 对
data-元素的所有更新（如状态变更）都应通过编辑器事务提交，而非直接改属性
最易被忽略的是：哪怕只加一个 data-* 属性，也意味着你已脱离 HTML 原生渲染流——后续所有交互、样式、序列化都必须由编辑器逻辑全程接管，不能指望浏览器自动补全。
