如何将开槽输入字段的表单属性设置为 shadow dom 内的表单？

Question

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

<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> 元素？最终用户不需要知道我的widget的内部表单的id，所以他们在创作时不能设置form属性；我已经尝试以编程方式设置此属性，但发现此属性是只读的！

Answer 1

一个简单的解决方案是将 light DOM 移动到 Shadow 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> 时。