document.registerElement - 为什么我们需要指定“prototype”和“extends”？

考虑我想扩展本地button元素，并创建我自己的super-button元素。据我所知，它必须遵循以下模式：

var SuperButton = document.registerElement('super-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});

我觉得很奇怪——不是吗prototype and extends参数说的是同一件事吗？如果我明确地说我的super-button使用HTMLButtonElement原型，为什么我还需要指定它扩展按钮元素？这不是多余的吗？对我来说，它看起来是完全相同的信息。

来自自定义元素规范 https://w3c.github.io/webcomponents/spec/custom/#custom-elements-type-extension-example:

一般来说，被扩展的元素的名称不能简单地通过查看它扩展的元素接口来确定，因为许多元素共享相同的接口（例如 q 和 blockquote 都共享 HTMLQuoteElement）。

换句话说，虽然它可能是多余的<button>元素，一般来说它并不多余，并且规范需要支持一般情况。

我认为这对于<button>不过，因为没有什么可以阻止你这样做：

var SuperButton = document.registerElement('super-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'a'
});