Я пытаюсь создать веб-компонент, который будет использоваться в элементе формы специально, который имеетnameиvalue, Я понимаю, что могу создать веб-компонент, которыйextendsHTMLInputElement:

<input is="very-extended">

но я пытаюсь создать совершенно новый элемент.

При создании обычного веб-компонента вы можете создать его из прототипа обычного веб-компонента.HTMLElement (HTMLElement.prototype). Что заставляет меня предположить, что я могу создать другой элемент с прототипомHTMLInputElement (HTMLInputElement.prototype). Вы на самом деле используете этот прототип, когдаextending API элементов ввода, так почему я не могу использовать этот прототип для создания совершенно нового элемента, который работает в форме?

Если вы посмотрите на теневую область обычного поля ввода:

Вы можете видеть, что внутри есть div. Я понимаю что этоHTMLInputElement имеет методы и атрибуты, методы получения / установки и т. д. Так почему же, когда я пытаюсь создать свой компонент, он не может быть частью имени, пары значений, найденной в форме?

Вот пример того, как я пытаюсь создать этот веб-компонент:

Обратите внимание, что его следует протестировать в браузере, поддерживающем веб-компоненты.

(function() {

  var iconDoc = (document._currentScript || document.currentScript).ownerDocument;
  var objectPrototype = Object.create(HTMLInputElement.prototype);

  Object.defineProperty(objectPrototype, 'name', {
    writable: true
  });

  Object.defineProperty(objectPrototype, 'value', {
    writable: true
  });

  objectPrototype.createdCallback = function() {
    var shadow = this.createShadowRoot();
    var template = iconDoc.querySelector('#test');
    shadow.appendChild(template.content.cloneNode(true));
  };

  document.registerElement('custom-input', {
    prototype: objectPrototype
  });

})();

console.log(
  $('form').serialize()
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template id="test">
  <div>This is a special input</div>
</template>

<form>
  <input name="regular" value="input">
  <custom-input name="foo" value="bar"></custom-input>
</form>

Почему в форме нет имени, пары значений и как я могу создать пользовательский элемент формы?