Выбор элемента в тени - PullRequest
Новая
       10

Выбор элемента в тени

0 голосов
/ 23 сентября 2018

Я создаю веб-компонент, и все идет нормально, но у меня возникает эта проблема, когда я пытаюсь получить ширину элемента, и он регистрирует меня

Не удается прочитать свойство 'getBoundingClientRect' из null

и строка ниже, чтобы записать фактическую ширину.

Мой код: 

attributeChangedCallback(name, oldVal, newVal) {
    const innerBar = this.shadow.querySelector('.progress-name-inner');
    const progressTitle = this.shadow.querySelector('.progress-title');
    console.log(progressTitle.getBoundingClientRect().width)

    switch (name) {
        case 'title':
            this._title = newVal || '';
            break;

        case 'complete':
            this._complete = parseInt(newVal) || 0;

            innerBar.style.width = this.complete + '%'
            break;
    }
}

1 Ответ

0 голосов
/ 23 сентября 2018

Когда атрибут элемента HTML задан встроенным (в коде HTML), метод attributeChangedCallback() вызывается перед методом connectedCallback().

Так что вам лучше установить содержимое Shadow DOM HTML вметод constructor(), если вы хотите обработать атрибуты пользовательских элементов.

Кроме того, когда выдается исключение, исключение метода останавливается, поэтому ошибка на innerBar.style.width не выдается.

...