在 Web Components 开发中，Customized Built-In Elements（如 class MyButton extends HTMLButtonElement）在 Safari 浏览器中完全不受支持，因此实际项目中应优先改用 Autonomous Custom Elements（继承 HTMLElement），或者仅在兼容浏览器内严格使用 is= 语法。本文将系统说明其中原因、标准写法，以及更稳定的跨浏览器自定义按钮组件方案。

Customized Built-In Elements（例如 `class MyButton extends HTMLButtonElement`）在 Safari 中根本无法正常工作，所以开发自定义按钮组件时，通常只能选择 Autonomous Custom Elements（继承 `HTMLElement`），或者严格遵循 `is=` 语法，并且仅在支持该特性的浏览器里使用。下面将详细解释背后的兼容性原因、正确的实现方式，以及更适合生产环境的跨浏览器实践方案。

在 Web Components 体系中，自定义元素主要分为两类：一种是Autonomous Custom Elements，也就是独立存在的自定义标签，例如 ；另一种是Customized Built-In Elements，即基于原生 HTML 元素进行扩展，例如 。你当前遇到的问题—— 页面上显示的只是普通文本，而不是具备按钮样式和行为的元素——原因就在这里：浏览器不会自动把这个标签当作 的实例处理，并且 Safari 对 extends: 'button' 这类扩展语法完全不支持。

? 为什么 没有按钮行为？

你定义了：

class MyButton extends HTMLButtonElement {
constructor() {
super(); // ✅ 正确调用父类构造器
}
}
customElements.define("my-button", MyButton, { extends: 'button' });

但 HTML 中写的是：

problem 

这段代码不会触发 MyButton 构造函数，因为 my-button 这个标签本身与 HTMLButtonElement 没有继承关系；只有当你使用原生

标签，并通过 is="my-button" 显式声明时，浏览器才会实例化对应的自定义类。

✅ 正确用法（仅适用于 Chrome/Edge/Firefox/Opera）：

problem works

customElements.define("my-button", 
class extends HTMLButtonElement {
constructor() {
super(); // 必须调用
}
connectedCallback() {
this.style.backgroundColor = '#007bff';
this.style.color = 'white';
this.style.border = 'none';
this.style.cursor = 'pointer';
}
}, 
{ extends: 'button' }
);

⚠️ 注意事项：

• document.createElement('button', { is: 'my-button' }) 是动态创建该自定义按钮元素的等效写法；
• is= 属性在 HTML 中不能省略（例如必须写成 ），同时也不能通过 setAttribute('is', ...) 在运行时动态添加，否则不会生效；
• Safari 长期不支持 is= 语法（Apple 自 2013 年起就明确拒绝实现），因此在生产环境中不建议依赖 Customized Built-In Elements。

✅ 推荐方案：使用 Autonomous Custom Elements

如果目标是实现真正稳定的 Web Components 兼容性，尤其要兼容 Safari 和 iOS WebKit，建议始终继承 HTMLElement，并自行封装按钮的结构、语义与样式：

Click Me!
Also Clickable!

class MyButton extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const button = document.createElement('button');
button.textContent = this.textContent || 'Default';
button.type = 'button'; // 防止表单意外提交
button.addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('click', { bubbles: true }));
});
shadow.appendChild(button);
}

// 可选：同步属性（如 disabled）
static get observedAttributes() {
return ['disabled'];
}

attributeChangedCallback(name, oldValue, newValue) {
const button = this.shadowRoot.querySelector('button');
if (name === 'disabled') {
button.disabled = newValue !== null;
}
}
}

customElements.define('my-button', MyButton);

这种做法的优势非常明显：

• ✅ 具备完整的跨浏览器兼容性，包括 Safari、iPhone 和 iPad 上的 iOS WebKit；
• ✅ 支持 Shadow DOM，可更好地封装样式、结构和交互逻辑；
• ✅ 可以按需映射原生按钮属性，例如 disabled、type、form 等；
• ✅ 语义更清晰，也更利于无障碍访问，可结合 role="button" 与 tabindex 提升可访问性。

? 总结

如果你希望构建一个可维护、可扩展、兼容 Safari 的自定义按钮组件，那么放弃对 is= 的依赖，转而采用 HTMLElement + Shadow DOM，才是更稳妥也更符合现代前端工程实践的方案。