Custom Elements继承HTMLButtonElement异常：为何仅显示文本而非按钮？

1. "Can't extend from button Illegal constructor" 错误原因 #

继承HTMLButtonElement这类内置HTML元素的自定义元素属于「自定义内置元素」，注册和使用规则与普通自定义元素不同：

• 注册时必须在customElements.define的第三个参数中指定{ extends: 'button' }，明确要扩展的内置元素类型
• HTML中不能直接使用<my-button>标签，必须写成<button is="my-button">。若误用<my-button>，浏览器会将其识别为默认继承HTMLElement的普通自定义元素，与代码中继承HTMLButtonElement的类不匹配，从而触发非法构造函数错误

2. 元素仅显示文本、无按钮样式的原因 #

错误使用<my-button>标签时，该元素本质是普通自定义元素，默认不具备原生button的样式（如边框、背景、内边距等），也不会继承HTMLButtonElement的默认样式与交互行为，因此仅显示纯文本。

正确实现示例 #

JavaScript代码 #

class MyButton extends HTMLButtonElement {
  constructor() {
    super();
    // 添加自定义逻辑，如绑定事件、修改内容等
    this.textContent = '自定义按钮';
  }
}

// 注册时必须指定extends选项
customElements.define('my-button', MyButton, { extends: 'button' });

HTML使用 #

<button is="my-button"></button>

若坚持要用<my-button>标签，需改为继承HTMLElement并手动添加按钮样式，示例：

class MyButton extends HTMLElement {
  constructor() {
    super();
    // 手动添加按钮样式
    this.style.border = '1px solid #ccc';
    this.style.padding = '4px 8px';
    this.style.borderRadius = '4px';
    this.style.cursor = 'pointer';
    this.textContent = '自定义按钮';
  }
}

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

对应HTML写法：

<my-button></my-button>

内容的提问来源于stack exchange，提问作者zloctb