浏览器解析等原生标签时直接创建对应内置元素实例（如htmlbuttonelement），不查customelementregistry；保留名禁止重定义，且与底层类型不同，影响内容获取方式和事件绑定行为。
浏览器遇到 <button></button> 标签时，不走 CustomElementRegistry 流程
HTML 解析器对原生标签（如 <button></button>、<div>、<code><p></p>）有硬编码识别逻辑，根本不会查 CustomElementRegistry。它直接根据标签名创建对应内置构造函数的实例，比如 HTMLButtonElement。这意味着：即使你写了 customElements.define('button', ...)，浏览器也会报错 Failed to execute 'define' on 'CustomElementRegistry': this name is already used —— 因为 button 是保留名，禁止覆盖。
常见误操作包括：在调试中试图重定义原生标签、或把自定义组件命名成 my-button 却误写为 button 导致注册失败。
<button></button> 和 <input type="button"> 的解析路径完全不同
二者虽都生成可点击控件，但底层 DOM 节点类型不同：
-
<button>Click</button>→ 解析为HTMLButtonElement实例，支持子节点（文本、<img>、<span></span>等） -
<input type="button" value="Click">→ 解析为HTMLInputElement实例，是空元素，内容只能靠value属性驱动
这个差异直接影响 JS 获取内容的方式：btn.textContent 对 <button></button> 有效，但对 <input> 返回空字符串；后者必须用 input.value。
IE 的兼容性坑就在这里：表单提交时，<button></button> 的提交值在 IE 中取 textContent，其他浏览器取 value 属性（若存在），不一致极易引发后端校验失败。
解析完成后，按钮是否“可用”取决于渲染进程的样式与层叠计算
HTML 解析只负责生成 DOM 节点并挂载到树上，但按钮能否响应点击，要等后续流程确认：
- CSSOM 构建后，计算出该
<button></button>的display、visibility、pointer-events值 - 若
pointer-events: none或父容器opacity: 0且未设will-change: opacity，事件可能被拦截 - 若按钮被
z-index更高的兄弟元素覆盖（哪怕透明），点击也会落到上层元素
所以“按钮显示正常但点不动”，大概率不是解析问题，而是渲染层的层叠上下文或 pointer-events 配置错误。用开发者工具的 Elements → Styles 面板检查 computed 样式里的 pointer-events 和 z-index 是最快定位方式。
动态插入的 <button></button> 不会触发 connectedCallback
只有自定义元素（如 <my-button></my-button>）才走升级（upgrade）流程；原生 <button></button> 插入 DOM 后立即具备完整行为，无需回调补初始化。但注意一个易忽略点：
通过 innerHTML 或 insertAdjacentHTML 插入含 <button></button> 的字符串时，其 onclick 内联事件**不会自动绑定**——浏览器解析 HTML 字符串时会忽略内联 JS（安全限制），必须手动用 addEventListener 补上，或改用 document.createElement('button') + el.addEventListener 组合。
这也是为什么用 outerHTML 复制按钮再插入页面后，常出现“按钮还在，但点没反应”的原因：复制的是静态快照，不包含运行时绑定的事件监听器。
