В веб-компонентах, чтобы зарегистрировать элемент, вы просто набираете:

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 а также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);

Вопрос 3: так как ясно, чтоx-foo-button продолжаетсяbuttonпочему мы должны указывать их оба при использованииdocument.createElement()? Я подозреваю, что это потому, чтоdocument.createElement() просто создает тег с синтаксисом<button is="x-foo-button"></button>, что подводит меня к следующему вопросу:

Вопрос 4: Какой смыслis синтаксис? Какова реальная разница между этим:

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) Второй синтаксис может быть использован налюбой элемент, а не просто расширение пользовательских?