如何创建一个行为类似于表单元素的 Web 组件？

Question

我正在尝试创建一个专门用于表单元素的 Web 组件，它具有 name 和 value。我知道我可以创建一个 extendsHTMLInputElement:

的 Web 组件

<input is="very-extended">

但我正在尝试创建一个全新的元素。

创建常规 Web 组件时，您可以从常规 HTMLElement (HTMLElement.prototype) 的原型创建它。这让我假设我可以用 HTMLInputElement (HTMLInputElement.prototype) 的原型创建一个不同的元素。当输入元素 extending API 时，你实际上使用了那个原型，那么为什么我不能使用那个原型来创建一个在表单中工作的全新元素？

如果您查看常规输入字段的阴影 dom：

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

这是我如何尝试创建此 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>

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

Answer 1

KevBot,

您似乎认为该元素将其自身包含在表单中。事实并非如此。它是通过 标签名称 搜索其子元素的表单，以决定它应该包含哪些元素。它会简单地忽略那些带有未知标签名称的标签。

您的 custom-input 姓名不在表单搜索的元素中。因此，它不包含在表格中。自定义元素的原型并不重要。这就是为什么如果您使用 is 它会起作用，因为那时标签名称会被保留。

当然，如果您愿意，您可以实现自己的 custom-form 行为不同。

Answer 2

你可以这样做：

(function() {
  var newInputExtended = Object.create(HTMLInputElement.prototype);

  newInputExtended.createdCallback = function() {
    this.value = 'baz';
  };

  document.registerElement('foo-input', {
    extends: 'input',
    prototype: newInputExtended
  });
  
  
  window.something = function(form, event) {
    $('<p>')
    .text($(form).serialize())
    .appendTo('body')
  
    event.preventDefault();
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="something(this, event)">
  <input is="foo-input" name="foo" value="bar">
  <button>Hi</button>
</form>

但是如果您尝试创建一个新的影子根目录，您会得到一个错误。看起来您只能在元素的用户代理影子根周围扩展 data/logic。

Answer 3

您可以创建将由 form 解释的 <custom-input> 自定义元素，只需在 template 中添加一个隐藏 input 元素与 name 和 value 配对您想要的。

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

默认 value（和 name）可以由您的自定义元素内部逻辑更新。

这个隐藏的 input 一定不能 插入 Shadow DOM 中以被容器 form 检测到。

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

如何创建一个行为类似于表单元素的 Web 组件？

How can I create a web component that acts like a form element?

javascript

forms

web-component

custom-element

html5-template