Qual é o objetivo da sintaxe "é" ao estender elementos em componentes da web?
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?