浏览器内核对继承原生元素的自定义内置元素存在根本性初始化差异：Chrome同步upgrade并立即反射属性，Firefox延迟upgrade且不自动注入语义，Safari行为介于两者之间；需统一在attributeChangedCallback处理属性、connectedCallback补全语义与样式。
继承原生 HTML 元素（如用 class MyButton extends HTMLButtonElement 定义自定义内置元素）时，不同浏览器内核对构造函数调用时机、原型链初始化、属性反射、默认样式继承等行为存在实质性差异——这不是“表现不一致”，而是“是否真正完成初始化”的根本区别。关键不在写法，而在浏览器是否真正将你定义的类与原生语义绑定。
构造时机与 upgrade 过程不可靠
Chrome（Blink）和 Safari（WebKit/WKWebView）在解析 HTML 时，对已注册的自定义内置元素（extends HTMLElement 或 extends HTMLButtonElement）会尝试同步 upgrade；但 Firefox（Gecko）直到 DOMContentLoaded 后才批量 upgrade，且若元素在脚本执行前已插入文档，可能跳过 upgrade 导致 instanceof 为 false、方法不可用。
- 不要依赖
document.createElement('my-button')立即获得实例：Firefox 中它仍是HTMLButtonElement，需显式customElements.upgrade() - 动态插入时，统一用
customElements.whenDefined('my-button').then(() => { ... })包裹操作，避免 race condition - 服务端渲染或 SSR 场景下，所有内置扩展元素必须在
<script></script>执行前通过is="my-button"属性声明，否则 Blink/WebKit 可能忽略 upgrade
属性反射与默认值继承不一致
原生元素（如 <button disabled></button>）的布尔属性（disabled、checked）、枚举属性（type、formenctype）具有自动反射机制：设置属性即同步更新内部状态并触发 attributeChangedCallback。但各内核对“何时开始反射”判断不同：
- Chrome 在
constructor执行后立即启用反射；Firefox 在connectedCallback首次调用时才激活；Safari 则在 upgrade 完成后延迟几帧才生效 - 这意味着在
constructor中读取this.disabled，Chrome 返回true，Firefox/Safari 返回false（即使 HTML 有disabled属性） - 解决方案：所有属性初始化逻辑必须移入
attributeChangedCallback，并在其中用this.hasAttribute('disabled')显式判断，而非依赖属性 getter
默认样式与伪类继承断裂
继承 HTMLButtonElement 的元素，在 Chrome 和 Safari 中可继承 button 的 user agent 样式（如 cursor: pointer、user-select: none），但 Firefox 默认不继承任何原生样式，表现为普通 inline 元素。
立即学习“前端免费学习笔记（深入）”；
- 不能依赖
:host { all: revert; }—— Firefox 不支持revert对原生 UA 样式的回退 - 必须显式复刻关键 UA 规则：例如针对
my-button，加my-button { -webkit-appearance: button; appearance: button; cursor: default; } -
::before/::after在继承内置元素上 Firefox 完全禁用，Chrome/Safari 支持但不触发伪类状态（如my-button:disabled::before不生效），应改用 Shadow DOM 内部插入
无障碍属性与语义树注入时机错位
原生按钮自带 role="button"、tabIndex=0、键盘交互（Space/Enter 触发 click）等语义能力。但继承后，各内核对这些能力的“注入点”不同：
- Chrome：upgrade 完成即注入完整语义树节点
- Safari：仅当元素首次获得焦点或被
aria-labelledby引用时才补全 role 和 name 计算 - Firefox：完全不自动注入，需手动
this.setAttribute('role', 'button')并监听keydown补全空格触发逻辑 - 建议：统一在
connectedCallback中检查this.getAttribute('role') === null，主动补全role和tabIndex，并用this.addEventListener('keydown', this.#handleKeydown)自行实现标准按钮行为
