gipouf gipouf - 7 months ago 24
Javascript Question

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

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

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'
});