不能直接重定义原生标签如button，必须用is属性扩展现有元素或创建带连字符的独立标签；自定义元素名须含短横线且不与原生名冲突；扩展内置元素需继承对应类、调用super()、指定extends选项；独立元素需继承htmlelement、手动挂载shadowroot、处理属性映射；旧浏览器需polyfill，contenteditable内自定义元素基本无效。
不能直接重定义 button、canvas、p 这类原生标签——浏览器会立刻抛出 DOMException，且即使绕过也拿不到原生 API。真正能落地的只有两条路：用 is 属性扩展现有内置元素，或用带连字符的独立标签（如 my-button）封装逻辑。
为什么 customElements.define("button") 必然失败
这不是兼容性问题，是规范强制拦截。自定义元素名必须含 ASCII 短横线（-），且不能与任何已知 HTML 标签名冲突。试图注册 "button"、"span"、"div" 都会触发错误：
Failed to execute 'define' on 'CustomElementRegistry': "button" is not a valid custom element name
即使你改写原型链或动态插入，DOM 解析阶段生成的节点仍是 HTMLButtonElement 实例，你的类根本不会被实例化。
用 is 扩展内置元素的全部硬性条件
想让 <button></button> 支持加载状态，必须走 is 路径，并满足以下全部条件：
-
class LoadingButton extends HTMLButtonElement—— 必须继承对应内置类，不能只继承HTMLElement - 构造函数第一行必须调用
super()，否则报Failed to construct 'HTMLButtonElement' -
customElements.define("loading-button", LoadingButton, { extends: "button" })——{ extends: "button" }不可省略 - HTML 中只能写
<button is="loading-button">Submit</button>，写成<loading-button></loading-button>或<button data-is="loading-button"></button>全部无效 -
is值（"loading-button"）必须与define()第一个参数完全一致，大小写、连字符都不能错
独立自定义元素怎么写才不掉坑
如果你不需要复用原生语义（比如 width、getContext()），用独立标签更简单，但仍有关键约束：
- 标签名必须含连字符：
<my-card></my-card>可以，<mycard></mycard>不行 - 类必须继承
HTMLElement（哪怕只加个日志），否则connectedCallback不触发 - 在
constructor中操作this.innerHTML或访问this.shadowRoot前，先检查并挂载：!this.shadowRoot && this.attachShadow({ mode: "open" }) - 属性不会自动映射：
<my-input value="abc"></my-input>不会让this.value自动同步，得在attributeChangedCallback里手动赋值：this.value = this.getAttribute("value")
旧浏览器和编辑器场景下的现实限制
Chrome 67+、Firefox 63+、Safari 10.1+ 原生支持 v1 规范，但 IE 和旧 Edge 完全不支持。如果目标环境包含这些，不引入 polyfill 就等于功能直接消失。推荐用 @webcomponents/custom-elements，且必须在任何 customElements.define() 之前加载。
更重要的是：contenteditable 区域内 customElements.define() 基本无效——connectedCallback 不触发、shadowRoot 被忽略、事件绑定失效。主流编辑器（Tiptap、Slate）都改用 <span data-type="note"></span> + 手动接管，而非尝试激活自定义元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
