如何创建继承HTMLButtonElement的HyperHTML自定义元素？扩展非HTMLElement可行吗？

嘿，你碰到的这个情况其实挺常见的——原生自定义元素在继承像HTMLButtonElement这类内置元素时，确实会有兼容性或者实现上的小坑，但你提到的document-register-element.js库刚好能解决这个问题，它完全支持让自定义元素继承非HTMLElement的内置元素（比如button）。

我给你调整下代码，你可以这么改：

首先要确保已经引入了document-register-element.js这个库，然后修改你的自定义元素注册逻辑：

class FabButton extends HTMLButtonElement {
  constructor() {
    super();
    this.html = hyperHTML.bind(this);
    // 这里可以加你的自定义逻辑，比如给按钮加默认样式类
    this.classList.add('fab-button');
  }
}

// 关键是这里的第三个参数，指定要继承的内置元素
customElements.define('fab-button', FabButton, { extends: 'button' });

接下来在HTML里使用的时候，有两种方式：

• 直接用自定义标签：

<fab-button>点击触发</fab-button>

• 或者用原生规范里的is属性写法（这种更贴合内置元素继承的标准用法）：

<button is="fab-button">点击触发</button>

为什么原生方式会失效呢？因为原生的Customized Built-in Elements（自定义内置元素）需要浏览器的完整支持，有些旧环境或者特定场景下支持度不够，但document-register-element.js做了兼容层处理，抹平了这些差异，让我们能顺利实现对button这类内置元素的继承。

你提到的示例核心思路也是一样的——靠这个库的兼容能力，让自定义元素能正确继承内置元素的特性，不用大改原有代码，只要注册时配置好extends选项就行。

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