我如何创建一个像组件一样的Web组件？ [英] How can I create a web component that acts like a form element?

问题描述

我正在尝试创建一个可用于表单元素的Web组件，它具有名称和值。我认识到我可以创建一个Web组件，该< extends an HTMLInputElement ：

 < input is =very-extended> 
  

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

创建常规Web组件时，可以从常规 HTMLElement （ HTMLElement.prototype ）。这导致我认为我可以用 HTMLInputElement （ HTMLInputElement.prototype ）的原型创建不同的元素。实际上，当扩展输入元素的API时使用该原型，那么为什么我不能使用该原型来创建一个在表单中工作的全新元素？

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

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

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

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

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1>

 /jquery.min.js\"></script><template id =test> < div>这是一个特殊输入< / div>< / template>< form> < input name =regularvalue =input> < custom-input name =foovalue =bar>< / custom-input>< / form>  

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

< custom-input> 自定义元素，该元素将被 form ，只需在模板中添加 a 隐藏 输入 名称和值的c>元素对。

 < template> 
< input type =hiddenname =foovalue =defaultVal> 
< / template> 
  

默认值（和<$ c

这个隐藏的 input 可以通过您的自定义元素内部逻辑进行更新。 $ c> 不得 插入到Shadow DOM中，以便由容器 form 检测。

$ b $

（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（$（'fo （$ rc'）。serialize（））

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< template id =test> < input type =hiddenname =foovalue =bar>< / template>< form> < input name =regularvalue =input> < custom-input name =foovalue =bar>< / custom-input>< / form>  

I am trying to create a web component that is usable in a form element specifically, that has a name, and a value. I recognize that I can create a web component that extendsan HTMLInputElement:

<input is="very-extended">

but I am trying to create an entirely new element.

When creating a regular web component, you can create it from the prototype of a regular HTMLElement (HTMLElement.prototype). Which leads me to assume that I can create a different element with the prototype of an HTMLInputElement (HTMLInputElement.prototype). You actually use that prototype when extending the API of input elements, so why can't I use that prototype to create an entirely new element that works in a form?

If you look at the shadow dom of a regular input field:

you can see that there is a div inside of there. I understand that this HTMLInputElement has methods and attributes, getters/setters, etc. So why is it that when I attempt to create my component, it fails to be part of the name, value pairs found in the form?

Here is an example of how I am trying to create this web component:

Please note that his should be tested in a browser that supports web components.

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

Why is the name, value pair not found among the form, and how can I create a custom form element?

解决方案

You can create your <custom-input> custom element that will be interpreted by a form, just by adding inside your template a hidden input element with the name and value pair your want.

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

The default value (and name) can by updated by your custom element internal logic.

This hidden input must not be inserted inside a Shadow DOM to be detected by the container 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组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！