Селекторы CSS с querySelector: выберите только элементы верхнего уровня в теневой DOM ⇐ Javascript

[Anonymous]

Предполагая следующее HTML-содержимое

Код: Выделить всё

an amount of unknown content
may contain: undesired node

At the root level:
desired node

Я хочу в JavaScript выбрать узел корневого уровня с помощью TAG.

Я могу придумать следующие утверждения:

Код: Выделить всё

tem.content.querySelectorAll("[TAG]")   // => [div, div]   // includes non-root
tem.content.querySelectorAll("> [TAG]") // => Error        // invalid syntax
tem.content.querySelectorAll(":root")   // => []           // no :root
tem.content.querySelectorAll(":host")   // => []           // no :host
tem.content.querySelectorAll(":host([TAG])")               // no :host
tem.content.querySelectorAll(":scope")  // => []           // no :scope

Ни один из вышеперечисленных вариантов не возвращает нужные элементы.

Фильтрация результатов первого возможна, но кажется, что в этой работе нет необходимости.

Каким будет правильное утверждение, если оно есть?

Спасибо

Код: Выделить всё

// (Workaround in the meantime)
[...tem.content.querySelectorAll("[TAG]")].filter(e => e.parentNode instanceof DocumentFragment)  // => [div]   // desired outcome

Пример:

Код: Выделить всё

function print(test) {
console.log(`Running: ${test}`);
try {
for (const result of test())
console.log("Result: " + result.outerHTML);
} catch {}
}

const tem = document.getElementById("tem")
print(() => tem.content.querySelectorAll("[TAG]")) // => [div, div]
print(() => tem.content.querySelectorAll("> [TAG]")) // => Error
print(() => tem.content.querySelectorAll(":root")) // => []
print(() => tem.content.querySelectorAll(":host")) // => []
print(() => tem.content.querySelectorAll(":host([TAG])")) // => []
print(() => tem.content.querySelectorAll(":scope")) // => []

print(() => [...tem.content.querySelectorAll("[TAG]")].filter(e => e.parentNode instanceof DocumentFragment)) // => [div]

Код: Выделить всё

an amount of unknown content
may contain: undesired node

At the root level:
desired node

Подробнее здесь: https://stackoverflow.com/questions/798 ... shadow-dom