Свойство ShadowRoot имеет значение null, несмотря на то, что открыто

Я пытаюсь получить доступ к ShadowRoot в моем элементе, и свойство element.shadowRoot возвращает null.
ShadowDOM определяется как mode: 'open', что правильно, я даже console.log(element) могу увидеть все свойства, а shadowRoot ЯВЛЯЕТСЯ объектом ShadowRoot тип.

В моем приложении я пытаюсь получить доступ к свойству следующим образом:

let el = document.getElementById('elementId');
...
console.log(el);
console.log("this.shadowRoot = ???");
console.log(el.shadowRoot);

Это нормально?

К приложению прилагается вывод console.log() из консоли, как вы можете видеть, shadowRoot определенно присутствует.
(Из консоли Firefox)
введите описание изображения здесь

Я пробовал и в последних версиях Firefox, и в Chrome, результат у обоих одинаковый.
Что я делаю не так?

Спасибо

Изменить

Я создал небольшой JSFiddle.
Если вы нажмете F12 и просмотрите консоль, вы увидите что элемент зарегистрирован и показывает свойство shadowRoot, но при регистрации shadowRoot отображается null.

Интересно, это ошибка? Возможно, это еще не полностью реализовано?

Я видел Element.shadowRoot в firefox, но я использую последнюю (65) версию Firefox и (72) Хром.


javascript custom-element shadow-dom
person Luke T O'Brien    schedule 09.02.2019    source источник
comment
возможно, вам стоит предоставить какой-то код   -  person Supersharp    schedule 10.02.2019
comment
Я добавил немного JSFiddle   -  person Luke T O'Brien    schedule 10.02.2019

Ответы (1)


arrow_upward
6
arrow_downward

Будьте осторожны с порядком выполнения скрипта.

В вашем примере вы пытаетесь получить свойство shadowRoot до определения настраиваемого элемента.

Он работает, когда вы получаете значение в нужное время.

Вы можете использовать метод whenDefined(), чтобы убедиться, что элемент определен:

customElements.whenDefined( 'web-component ').then( () => {
    let el = document.getElementById('elementId');
    console.log(el.shadowRoot);
} )
person Supersharp    schedule 10.02.2019
comment
Аххх, спасибо, я не знал о методе whenDefined ... А что, если есть много пользовательских элементов с одинаковыми именами? В моем реальном приложении у меня есть несколько web-components - все с одинаковым именем тега - person Luke T O'Brien; 11.02.2019
comment
Если существует несколько веб-компонентов, все они будут созданы до вызова функцииDefined. - person Supersharp; 11.02.2019