在本机 DOM 中，有没有办法将两个节点组合起来形成一个范围以供查询？

Question

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

<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 中，有没有办法将两个节点组合起来形成一个范围以供查询？

In native DOM, is there a way to combine two nodes forming a scope for query purpose?

javascript

shadow-dom