document.registerElement - Why do we need to specify both 'prototype' and 'extends'?

Question

Consider I want to extend the native button element, and create my own super-button element. As I know, it must follow the following pattern:

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

It looks strange to me - doesn't the prototype and extends parameters say the same thing? If I explicitly say that my super-button use the HTMLButtonElement prototype, why do I also need to specify that it extends the button element? isn't it redundant? For me it looks like exactly the same information.

Answer 1

From the 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).

In other words, while it may be redundant for <button> elements, it isn't redundant in general and the spec needs to support the general case.

I would argue that it isn't even redundant for <button> though, as there is nothing preventing you from doing:

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