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

Question

假设我想扩展原生 button 元素，并创建我自己的 super-button 元素。据我所知，它必须遵循以下模式:

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

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

Answer 1

来自Custom Elements specification :

In general, the name of the element being extended cannot be determined simply by looking at what element interface it extends, as many elements share the same interface (such as q and blockquote both sharing HTMLQuoteElement).

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

我认为它对于 <button> 甚至都不是多余的不过，因为没有什么能阻止你这样做:

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