document.registerElement - 为什么我们需要同时指定'prototype'和'extends'？

Question

考虑我想扩展native button元素,并创建自己的super-button元素.据我所知,它必须遵循以下模式:

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

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

Answer 1

来自自定义元素规范:

通常,扩展元素的名称不能简单地通过查看它扩展的元素接口来确定,因为许多元素共享相同的接口(例如q和blockquote都共享HTMLQuoteElement).

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

我认为它甚至不是多余的<button>,因为没有什么可以阻止你这样做:

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