Nos componentes da web, para registrar um elemento, basta digitar:

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

Para criar um elemento, você pode fazer um destes:

<x-foo></x-foo>

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

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

Tudo isso é bom e elegante. Os problemas começam quando você está falando sobre a extensão de elementos existentes.

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

Questão 1: Por que a duplicação? Aqui,'button' deve ser suficiente (especialmente porque é fácil o suficiente elaborar o protótipo do elemento comObject.getPrototypeOf(document.createElement(tag));

Questão 2: Como essas informações são usadasinternamente? O que acontece se você, por exemplo, tiverprototype: Object.create(HTMLFormElement.prototype eextends: 'button' (onde está o que está depoisextends não corresponde ao protótipo passado)

Para criar um, você pode fazer um destes:

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

Questão 3: desde que fique claro quex-foo-button estendebutton, por que precisamos especificar os dois quando usamosdocument.createElement()? Eu suspeito que é porquedocument.createElement() simplesmente cria uma tag com sintaxe<button is="x-foo-button"></button>, o que me leva à próxima pergunta:

Pergunta 4: Qual é o objetivo dois sintaxe? Qual é a diferença real entre fazer isso:

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

E isto:

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

Diferente de 1) A primeira sintaxe precisará<button is="x-foo-button"></button> para criar uma instância no documento 2) A segunda sintaxe pode ser usada emqualquer elemento, não apenas uma extensão dos personalizados?