浏览器内核对继承原生元素的自定义内置元素存在根本性初始化差异：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

属性反射与默认值继承不一致

原生元素（如 ）的布尔属性（disabled、checked）、枚举属性（type、formenctype）具有自动反射机制：设置属性即同步更新内部状态并触发 attributeChangedCallback。但各内核对“何时开始反射”判断不同：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 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) 自行实现标准按钮行为

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！