如何将带槽的输入字段的form属性设置为shadow dom内部的表单?

时间:2018-12-07 20:59:51

标签: javascript forms web-component shadow-dom

我有一个这样的自定义元素:

<my-magic-form>
    #shadowRoot:
    <form id="some_id_name_invisible_to_end_users">
      <input disabled name="entry_id"></input>
      <slot name="fields_toFill"></slot>
    </form>
</my-magic-form>

我的小部件的用户应该添加自己的输入字段,如下所示:

<my-magic-form>
  <input slot="fields_toFill" value="some_value1"/>
  <textarea slot="fields_toFill"/>
</my-magic-form>

我的问题是:如何将这两个带槽的<input><textarea>控件链接到小部件的影子DOM内的<form>元素?最终用户不需要知道我的窗口小部件的内部表单ID,因此他们在创作时无法设置form属性。而且我尝试以编程方式设置此属性,只是为了发现该属性是只读的!

1 个答案:

答案 0 :(得分:1)

一个简单的解决方案是将轻型DOM移到阴影DOM内容中。 收听slotchange事件,然后将assignedNodes()移到<slot>元素之前。

var form = this.shadowRoot.querySelector( 'form' )
var slot = this.shadowRoot.querySelector( 'slot' )

slot.addEventListener( 'slotchange', () => {
    for (var field of slot.assignedNodes()) {
        form.insertBefore( field, slot ) 
    } 
} )

或者,如果您不想移动轻型DOM字段,则应将其复制为<input type="hidden">字段,例如提交<form>的示例。