我有一个这样的自定义元素:
<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
属性。而且我尝试以编程方式设置此属性,只是为了发现该属性是只读的!
答案 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>
的示例。