Question

我有一个custom元素，其中包含一个内部内容，供用户填写其自定义输入字段。在I之外，我定义了一些与自定义元素相关的样板字段，它们也属于同一表单。像这样的东西：

<my-magic-form>
    <input disabled name="entry_id"></input>
    <slot name="fields_toFill"></slot>
</my-magic-form>

现在，每次我进行一些查询以获取所有表单时，我都必须这样运行两次：

const input_field = this.shadowRoot.querySelectorAll("input");
const slotted_input = this.shadowRoot.querySelector("slot[name='fields_toFill']").assignedNodes();
...

是否可以将input_field与slotted_input组合在一起，以便我可以一次执行所有操作？在jQuery中，您可以使用.add方法进行链接，但是在原始Javascript中，这似乎完全消失了？

Answer 1

您可以使用传播语法将两者组合成一个数组：

const both = [...this.shadowRoot.querySelectorAll("input"),
              ...this.shadowRoot.querySelector("slot[name='fields_toFill']").assignedNodes()];

在本机DOM中，是否有一种方法可以将两个节点组合起来以形成用于查询目的的作用域？

1 个答案: