javascript - Web コンポーネントで要素を拡張するときの「is」構文のポイントは何ですか?

Question

Web コンポーネントで要素を登録するには、次のように入力するだけです。

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

要素を作成するには、次のいずれかを実行できます。

<x-foo></x-foo>

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

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

これはすべてうまくてダンディです。問題は、既存の要素の拡張について話しているときに始まります。

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

質問 1 : なぜ重複するのですか? ここでは、'button'十分なはずです (特に、要素のプロトタイプを簡単に作成できるため)Object.getPrototypeOf(document.createElement(tag));

質問 2 : その情報は社内でどのように使用されていますか? prototype: Object.create(HTMLFormElement.prototypeたとえばandがある場合はどうなりますextends: 'button'か (その後extendsが渡されたプロトタイプと一致しない場合)

作成するには、次のいずれかを実行できます。

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

質問 3x-foo-button : extendsは明らかなのにbutton、なぜ、を使用するときに両方を指定する必要があるのdocument.createElement()ですか? document.createElement()これは、単に構文でタグを作成するためだと思われます<button is="x-foo-button"></button>。これにより、次の質問が発生します。

質問 4is :構文のポイントは何ですか? これを行うことの実際の違いは何ですか:

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

この：

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

1) 以外: 最初の構文は<button is="x-foo-button"></button>、ドキュメント内にインスタンスを作成する必要があります。2) 2 番目の構文は、カスタム要素の拡張だけでなく、任意の要素で使用できますか?