javascript – 如何创建一个像表单元素一样的Web组件？

我正在尝试创建一个特定于表单元素中可用的Web组件,它具有名称和值.我知道我可以创建一个扩展HTMLInputElement的Web组件：

<input is="very-extended">

但我正在努力创造一个全新的元素.

创建常规Web组件时,可以从常规HTMLElement(HTMLElement.prototype)的原型创建它.这让我想到我可以使用HTMLInputElement(HTMLInputElement.prototype)的原型创建一个不同的元素.在扩展输入元素的API时,您实际上是使用该原型,那么为什么我不能使用该原型来创建一个在表单中工作的全新元素？

如果你看一下常规输入字段的阴影dom：

你可以看到里面有一个div.我知道这个HTMLInputElement有方法和属性,getter / setter等等.那么为什么当我尝试创建我的组件时,它不能成为表单中找到的名称,值对的一部分？

以下是我尝试创建此Web组件的示例：

请注意,他应该在支持Web组件的浏览器中进行测试.

(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>

为什么在表单中找不到名称,值对,以及如何创建自定义表单元素？

解决方法:

您可以创建< custom-input>将由表单解释的自定义元素,只需在模板中添加隐藏的输入元素即可
您想要的名称和价值对.

<template>
    <input type="hidden" name="foo" value="defaultVal">
</template>

默认值(和名称)可以由您的自定义元素内部逻辑更新.

此隐藏输入不得插入Shadow DOM中以供容器表单检测.

(function() {

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

  objectPrototype.createdCallback = function() {
    //var shadow = this.createShadowRoot();
    var template = iconDoc.querySelector('#test');
    this.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">
  <input type="hidden" name="foo" value="bar">
</template>

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

标签：javascript,forms,web-component,custom-element,html5-template
来源： https://codeday.me/bug/20190929/1832541.html