Question

我正在构建Web组件，并且一切都很好，但是当我尝试获取元素的宽度并记录了我的信息时

无法读取null的属性'getBoundingClientRect'

并在下面记录实际宽度。

我的代码：

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;
    }
}

Answer 1

当内联定义HTML元素属性（在HTML代码中）时，将在attributeChangedCallback()方法之前调用connectedCallback()方法。

因此，如果要处理“自定义元素”属性，最好在constructor()方法中设置Shadow DOM HTML内容。

此外，当引发异常时，方法执行将停止，这就是为什么不会引发innerBar.style.width上的错误的原因。

在阴影dom中选择元素

1 个答案: