<p>不能用 customElements.define() 给 span、p 等原生标签加自定义行为，因 HTML 规范强制要求自定义元素名必须含短横线且不得与原生标签冲突；强行注册会导致降级为未知标签，丢失语义与 API；可行方案是用 data- 属性标记 + 编辑器层统一接管。</p>
不能用 customElements.define() 给 span、p 这类原生标签加自定义行为——浏览器直接拒绝，控制台报 DOMException: Failed to execute 'define' on 'CustomElementRegistry': "span" is not a valid custom element name。
为什么重定义原生标签必然失败
这是 HTML 规范硬性限制：所有自定义元素名必须含短横线（-），且不能与任何已知原生标签名（包括 div、button、slot 甚至 html）冲突。哪怕绕过校验强行注册，DOM 解析器也会降级为未知标签，丢失语义、样式继承和原生 API（比如 focus()、innerText）。
- 错误现象：控制台报错，但页面仍渲染出普通
span，绑定的connectedCallback完全不触发 - 试图用
class MySpan extends HTMLSpanElement也不行——这属于“自定义内置元素”，需用is="my-span"语法，且兼容性差（Safari 不支持） - 真正能落地的路径只有一条：放弃劫持，改用
data-属性标记 + 编辑器层统一接管
用 data- 属性实现指令式交互的实操要点
主流在线编辑器（Tiptap、Slate、CodeMirror 插件）都走这条路：不碰原生标签语义，靠属性标记 + 运行时遍历 + 手动绑定。
- HTML 中写：
<span data-type="review" data-status="pending">待审核</span> - 编辑器初始化后，用
document.querySelectorAll('[data-type]')找到所有目标节点 - 对每个节点手动绑定事件：
el.addEventListener('click', handleReviewClick)，并设置contenteditable="false"防止用户误删结构 - 光标进入该
span时，动态添加class="active"激活右键菜单；离开时移除 - 序列化时提取
el.dataset.type和el.dataset.status，生成结构化 JSON，而非依赖 HTML 字符串
customElements.define 的正确使用边界
如果你确实需要新标签（比如 <date-picker> 或 <nav-menu>），customElements.define() 是合法且推荐的，但必须守住几条线：
立即学习“前端免费学习笔记（深入）”；
- 标签名必须含短横线：
"date-picker"✅，"datepicker"❌，"my_button"❌ - 类必须继承
HTMLElement：class DatePicker extends HTMLElement✅，class DatePicker {}❌（会报Illegal constructor） - DOM 操作只能在
connectedCallback里做，constructor中只允许super()、this.attachShadow()、初始化私有字段 - 样式必须注入 Shadow DOM：
shadowRoot.innerHTML = '<style>:host { display: inline-block; }</style>'，外部 CSS 默认不穿透 - 属性监听要配
static get observedAttributes()，且attributeChangedCallback不响应初始值，得在connectedCallback里手动同步
真正的难点不在注册语法，而在权衡：是造一个全新标签（强封装、高复用、但需学习成本），还是用 data- 标记现有标签（轻量、灵活、可渐进增强，但逻辑分散在 JS 层）。多数编辑器场景选后者，因为语义和编辑行为必须解耦——你不能让 <p> 突然变成不可编辑的卡片，但可以给它加个 data-role="card" 让编辑器知道“别动它”。
