customelements.define() 在 contenteditable 中无效，因规范限制导致生命周期不触发、shadowroot 被忽略；主流方案是用 contenteditable="false" 的语义化 span 替代，由编辑器统一控制渲染、交互与序列化。
customElements.define() 在 contenteditable 里根本不起作用
浏览器不会在 contenteditable="true" 区域内激活自定义元素的生命周期：connectedCallback 不触发、shadowRoot 被忽略、事件监听器绑定失败。你插入一个 <my-note></my-note>，它就真的只是个没解析的标签，渲染效果等同于 <xyz></xyz>。
常见错误现象包括：
- 光标卡在标签外侧，无法进入或选中内部“内容”
- 复制粘贴后变成纯文本或转义字符串（如
<my-note>...） - 撤销/重做破坏结构，甚至把整个自定义标签删掉
- IME 输入（如中文输入法）过程中标签被意外拆解
这不是写法问题，是规范限制——contenteditable 的 DOM 操作绕过了 Custom Elements 规范要求的插入路径。
用 span + data- 属性替代自定义标签
主流编辑器（Tiptap、Slate、ProseMirror）全部采用这个方案：用语义化 span 承载元信息，由编辑器统一控制渲染与交互。
关键实操点：
-
contenteditable="false"必须加在span上，否则光标会跳进去破坏结构 - 视觉表现靠 CSS
[data-type="note"]::before或框架组件动态注入（不是靠自定义元素自带模板） - 序列化时不依赖 HTML 字符串，而是遍历节点提取
data-type、data-id等属性生成 JSON - 插入逻辑由编辑器接管：监听
keydown或工具栏点击，在光标位置用Range.insertNode()插入该span
如果非要“看起来像自定义标签”，只能走字符串预处理
某些轻量编辑器（如 medium-editor 衍生项目）允许拦截 paste 或 insertHTML 事件，在 DOM 解析前做正则替换。
示例（仅作示意，不推荐用于复杂场景）：
editor.addEventListener('paste', (e) => {
e.preventDefault();
const html = e.clipboardData.getData('text/html');
const clean = html.replace(/<note>(.*?)/g, (_, content) =>
`<span contenteditable="false" data-type="note">${content}</span>`
);
document.execCommand('insertHTML', false, clean); // 注意：execCommand 已废弃，此处仅为说明逻辑
});</note>
但要注意：
- 正则无法处理嵌套、换行、属性值含引号等情况，极易出错
- 用户直接输入
<note></note>不会被捕获，必须配合工具栏按钮或快捷键 - 仍需手动处理光标定位、焦点管理、撤销栈等，没省多少事
真正需要关注的是输入层、格式层、输出层三层补全
contenteditable 只是开关，不是编辑器。漏掉任何一层，都会导致：
- 粘贴 Word 内容后出现
<div class="MsoNormal"> 这类垃圾标签 <li>回车在 Chrome 插入 <code><div>、Firefox 插入 <code><p></p>，对齐逻辑崩坏 - 导出时直接取
innerHTML，结果字体颜色用<font color="red"></font>，加粗用<b></b>，语义混乱 - 无法判断当前光标是否处于列表项内，导致“缩进”按钮状态错乱
最易被忽略的点是：所有格式操作都得基于 Selection + Range 手动实现，而不是依赖 document.execCommand —— 它已在 2025 年起被主流浏览器逐步禁用，且跨浏览器输出不可控。
