如何将槽输入字段的表单属性设置为影子 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>控件链接到小部件的shadow DOM中的<form>元素？最终用户不需要知道我的小部件的内部表单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 ) 
} 
} )

或者，如果不想移动light DOM字段，则应将它们复制为<input type="hidden">字段，例如提交<form>时的字段。