Um ein Element in Webkomponenten zu registrieren, geben Sie einfach Folgendes ein:

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

Um ein Element zu erstellen, können Sie einen der folgenden Schritte ausführen:

<x-foo></x-foo>

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

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

Das ist alles in Ordnung und gut. Die Probleme beginnen, wenn Sie über das Erweitern vorhandener Elemente sprechen.

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

Frage : Warum die Vervielfältigung? Hier,'button' sollte ausreichen (zumal es einfach genug ist, den Prototyp des Elements mit @ zu erarbeitObject.getPrototypeOf(document.createElement(tag));

Frage : Wie werden diese Informationen verwendetim Innere? Was passiert, wenn Sie zum Beispiel @ habprototype: Object.create(HTMLFormElement.prototype undextends: 'button' (wo was ist nachextends stimmt nicht mit dem übergebenen Prototyp überein)

Um eine zu erstellen, können Sie eine der folgenden Aktionen ausführen:

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

Frage : da es klar ist, dassx-foo-button erweitertbutton, warum müssen wir beide angeben, wenn wir @ verwenddocument.createElement()? Ich vermute, das liegt andocument.createElement() erstellt einfach ein Tag mit der Syntax<button is="x-foo-button"></button>, was mich zur nächsten Frage bringt:

Frage 4: Was ist der Sinn desis Syntax? Was ist der eigentliche Unterschied zwischen diesem Vorgehen:

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

Und das

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

Anderes als 1) Die erste Syntax benötigt<button is="x-foo-button"></button>, um eine Instanz im Dokument zu erstellen. 2) Die zweite Syntax kann für @ verwendet werdeirgendei Element, nicht nur eine Erweiterung der benutzerdefinierten?