GetElementById из Shadow DOM

Question

У меня есть пользовательский элемент с теневым DOM, который прослушивает атрибут target change.
target должен быть идентификатором элемента, к которому должен быть присоединен мой компонент.
Я пытался использовать querySelector и getElementById, чтобы получить элемент внешнего DOM, но он всегда возвращает null. Eg.:

console.log(document.getElementById(target));
console.log(document.querySelector('#' + target));

Оба вышеприведенных возвращают ноль.
Есть ли способ получить ссылку на элемент в родительском документе из теневого DOM?

Answer 1

Вам просто нужно позвонить Shadow Root .

this.shadowRoot.getElementById('target') должно работать.

Вот пример, Синтаксис get свяжет свойство объекта с функцией.

get target() {
    return this.shadowRoot.getElementById('target');
}

Answer 2

Если цель должна быть идентификатором, то

document.getElementById(target)

- правильный код для получения элемента по id. Другой код,

document.querySelector(target)

неверно, правильная версия будет

document.querySelector("#" + target)

Сам факт, что вы получите null в качестве результата для первого, означает, что в document нет тега с id, который вы указали. Возможно, он был изменен / удален, если он вообще существовал, или вы можете захотеть получить идентификатор тега другой страницы.