Есть ли способ объединить два узла в нативном 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()];