我正在尝试创建一个扩展 div 元素的 Web 组件，我发现了另一个关于如何扩展本机元素（在本例中为按钮）的Stack Overflow 问题。但是，我无法让它发挥作用。而且，根据此答案中的更新，它应该可以工作。
如果您查看此简化代码片段中的结果，它只是呈现为带有文本的简单内联元素。如果您打开 Chrome 控制台并查看属性选项卡，也很明显它不是从 HTMLButtonElement 继承的（它应该继承）。怎么了？
class FancyButton extends HTMLButtonElement {
constructor() {
super(); // always call super() first in the ctor.
this.addEventListener('click', e => this.innerHTML = "I was clicked");
}
}
customElements.define('fancy-button', FancyButton, { extends: 'button' });<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<fancy-button>Click me</fancy-button>
</body>
</html>