在 shadow dom 中选择元素

Question

I'm building web component and it's all going fine, but I have this problem when I try to get width of element and it logs me

Cannot read property 'getBoundingClientRect' of null

and line bellow that it logs actual width.

My code:

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

When an HTML element attribute is defined inline (in the HTML code), the attributeChangedCallback() method is called before the connectedCallback() method.

So you'd better set the Shadow DOM HTML content in the constructor() method if you want to process Custom Elements attributes.

Also, when an exception is thrown the method excution stops, that's why the error on innerBar.style.width is not thrown.