直接重定义原生标签如button会抛DOMException且无法获取原生API；可行方案只有两种：用is属性扩展现有元素（需继承对应内置类、super()、define时指定extends、HTML中用is="xxx"），或用带连字符的独立自定义标签（如my-button，需继承HTMLElement、手动处理属性、注意升级时机）。
不能靠重定义 span、button 这类原生标签来扩展功能——浏览器会直接抛 DOMException，而且就算绕过去也拿不到原生 API。真正能落地的路径只有两条：用 is 属性扩展现有内置元素，或用带连字符的独立自定义标签封装逻辑。
为什么直接 customElements.define("button") 会失败
规范强制要求自定义元素名必须含连字符（如 my-button），且禁止与任何已知 HTML 标签名冲突。试图注册 "button"、"p"、"canvas" 等都会触发错误：
Failed to execute 'define' on 'CustomElementRegistry': "button" is not a valid custom element name
这不是兼容性问题，而是浏览器内核级拦截。即使你用 JS 动态改写原型链，解析阶段生成的节点仍是 HTMLButtonElement 实例，你的类根本不会被实例化。
用 is 属性扩展现有元素的硬性条件
想让 <button> 具备加载状态管理能力，必须走 is 路径，且满足全部以下条件：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
class LoadingButton extends HTMLButtonElement—— 必须继承对应内置类，不能只继承HTMLElement -
constructor()内第一行必须调用super()，否则报Failed to construct 'HTMLButtonElement' -
customElements.define("loading-button", LoadingButton, { extends: "button" })——{ extends: "button" }不可省略 - HTML 中只能写
<button is="loading-button">Submit</button>，写成<loading-button>或<button data-is="loading-button">全部无效 -
is值（"loading-button"）必须与define()第一个参数完全一致，大小写、连字符都不能错
独立自定义元素该怎么写才不踩坑
如果你不需要复用原生标签语义或属性（比如 width、getContext()），用独立标签更简单，但仍有关键约束：
- 标签名必须含连字符，
<my-card>可以，<mycard>不行 - 类必须继承
HTMLElement（哪怕只加个日志），否则connectedCallback不触发 - 若在
constructor中操作this.innerHTML或访问shadowRoot，要先检查!this.shadowRoot && this.attachShadow({ mode: "open" }) - 属性变更需手动映射：写了
<my-input value="abc">，但this.value不会自动同步，得在attributeChangedCallback里用this.value = this.getAttribute("value") - 旧浏览器（IE / Edge ≤18）必须引入
@webcomponents/custom-elementspolyfill，且必须在任何define()调用前加载
最容易被忽略的 DOM 升级时机问题
如果 HTML 里先写了 <my-button>，再执行 customElements.define()，这个节点不会立刻执行 constructor；它会保持为 HTMLUnknownElement，直到被移出再插入文档，或显式调用 customElements.upgrade()。这意味着：
-
:not(:defined)伪类是唯一能安全隐藏未升级元素的 CSS 方式 - 不要在
constructor里依赖this.textContent或子节点——它们可能还没解析完 - 动态创建时（
document.createElement("my-button")），constructor同步执行，但connectedCallback要等 append 到 document 后才触发
实际项目里，大部分 bug 都出在把“注册”当成“生效”，而忽略了 DOM 节点生命周期和升级机制的分离。
