En componentes web, para registrar un elemento simplemente escriba:

var XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype)
});

Para crear un elemento, puede hacer uno de estos:

<x-foo></x-foo>

var xFoo = new XFoo();
document.body.appendChild(xFoo);

var xFoo = document.createElement( 'x-foo')
document.body.appendChild(xFoo);

Todo está bien y elegante. Los problemas comienzan cuando se habla de extender los elementos existentes.

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

Pregunta 1: ¿Por qué la duplicación? Aquí,'button' debería ser suficiente (especialmente porque es bastante fácil de resolver el prototipo del elemento conObject.getPrototypeOf(document.createElement(tag));

Pregunta 2: ¿Cómo se usa esa información?internamente? ¿Qué sucede si, por ejemplo, tienesprototype: Object.create(HTMLFormElement.prototype yextends: 'button' (donde está lo que hay despuésextends no coincide con el prototipo aprobado)

Para crear uno, puede hacer uno de estos:

<button is="x-foo-button"></button>

var xFooButton = new XFooButton();
document.body.appendChild(xFoo);

var xFooButton = document.createElement('button', 'x-foo-button');
document.body.appendChild(xFooButton);

Pregunta 3: ya que está claro quex-foo-button se extiendebutton, ¿por qué tenemos que especificar ambos cuando usamosdocument.createElement()? Sospecho que es porquedocument.createElement() simplemente crea una etiqueta con sintaxis<button is="x-foo-button"></button>, lo que me lleva a la siguiente pregunta:

Pregunta 4: ¿Cuál es el punto de lais ¿sintaxis? ¿Cuál es la diferencia real entre hacer esto?

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

Y esto:

var XFooButton = document.registerElement('x-foo-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
});

Aparte de 1) La primera sintaxis necesitará<button is="x-foo-button"></button> para crear una instancia en el documento 2) La segunda sintaxis se puede usar enalguna elemento, no solo una extensión de los personalizados?