原生形式的自定义输入元素

Question

对于Web组件,人们想要创建和覆盖的元素之一是<input>.输入元素很糟糕,因为它们很多东西取决于它们的类型而且通常难以定制,因此人们总是想要修改它们的外观和行为是正常的.

两年前或多或少,当我第一次听说Web组件时,我非常兴奋,我想要创建的第一种元素是自定义输入元素.现在规范已经完成,看起来我对输入元素的需求没有得到解决.Shadow DOM应该允许我改变它们的内部结构和外观但是输入元素被列入黑名单并且不能有阴影根,因为它们已经有一个隐藏的.如果我想添加额外的逻辑和行为,带有is属性的自定义内置元素应该可以解决问题; 我无法做影子DOM魔法,但至少我有这个,对吧？好吧Safari不会实现它,聚合物不会因为这个原因而使用它们,它们的气味就像很快就会被弃用的标准.

所以我留下了正常的自定义元素; 他们可以使用shadow DOM并拥有我想要的任何逻辑,但我希望它们是输入!他们应该在一个内部工作<form>,但如果我是正确的,表单元素不喜欢它们.我是否必须编写自己的自定义表单元素,以复制本机的所有内容？我必须告别FormData,验证API等吗？我是否失去了使用没有javascript工作的输入表单的能力？

Answer 1

您可以使用所需的外观和行为创建自定义元素.

在其中放入一个<input>右侧的隐藏元素name(将传递给它<form>).

value每当修改自定义元素"可见值"时,更新其属性.

我在这个问题的答案中发布了一个例子.

class CI extends HTMLElement 
{
    constructor ()
    {
        super()
        var sh = this.attachShadow( { mode: 'open' } )
        sh.appendChild( tpl.content.cloneNode( true ) )
    }

    connectedCallback ()
    {
        var view = this
        var name = this.getAttribute( 'name' )

        //proxy input elemnt
        var input = document.createElement( 'input' )
        input.name = name
        input.value = this.getAttribute( 'value' )
        input.id = 'realInput'
        input.style = 'width:0;height:0;border:none;background:red'
        input.tabIndex = -1
        this.appendChild( input )


        //content editable
        var content = this.shadowRoot.querySelector( '#content' )
        content.textContent = this.getAttribute( 'value' )
        content.oninput = function ()
        {
            //console.warn( 'content editable changed to', content.textContent )
            view.setAttribute( 'value', content.textContent)
        }

        //click on label
        var label = document.querySelector( 'label[for="' + name + '"]' )
        label.onclick = function () { content.focus() }

        //autofill update
        input.addEventListener( 'change', function ()
        {
            //console.warn( 'real input changed' )
            view.setAttribute( 'value', this.value )
            content.value = this.value 
        } )

        this.connected = true 
    }

    attributeChangedCallback ( name, old, value )
    {
        //console.info( 'attribute %s changed to %s', name, value )
        if ( this.connected )
        {
            this.querySelector( '#realInput' ).value = value 
            this.shadowRoot.querySelector( '#content' ).textContent = value 
        }                
    }

}
CI.observedAttributes = [ "value" ]
customElements.define( 'custom-input', CI )
//Submit
function submitF ()
{
    for( var i = 0 ; i < this.length ; i++ )
    {
        var input = this[i]
        if ( input.name ) console.log( '%s=%s', input.name, input.value )
    } 
}
S1.onclick = function () { submitF.apply(form1) }

<form id=form1>
    <table>
        <tr><td><label for=name>Name</label>        <td><input name=name id=name>
        <tr><td><label for=address>Address</label>  <td><input name=address id=address>
        <tr><td><label for=city>City</label>        <td><custom-input id=city name=city></custom-input>
        <tr><td><label for=zip>Zip</label>          <td><input name=zip id=zip>
        <tr><td colspan=2><input id=S1 type=button value="Submit">
    </table>
</form>
<hr>
<div>
  <button onclick="document.querySelector('custom-input').setAttribute('value','Paris')">city => Paris</button>
</div>

<template id=tpl>
  <style>
    #content {
      background: dodgerblue;
      color: white;
      min-width: 50px;
      font-family: Courier New, Courier, monospace;
      font-size: 1.3em;
      font-weight: 600;
      display: inline-block;
      padding: 2px;
    }
  </style>
  <div contenteditable id=content></div>
  <slot></slot>
</template>