在 shadow dom 中选择元素

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 元素属性时，将在connectedCallback()方法之前调用attributeChangedCallback() connectedCallback()方法。

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

此外，当抛出异常时，方法执行停止，这就是不抛出关于innerBar.style.width的错误的原因。