attributeChangedCallback not firing

Question

問題如下，當我在devtool或js代碼中更新attr sticky時，我無法獲取attributeChangedCallback來觸發。 在添加和刪除粘性屬性時，_updateSticky（）方法在滾動時運行得很好。

class HeaderLogo extends HTMLElement { 

static get observedAttribute() { 
    return ['alt-logo', 'sticky']; 
} 

constructor() { 
    super();  
} 

connectedCallback() { 
    this._updateSticky(); 

    window.addEventListener('scroll',() => { 
     this._updateSticky(); 
    }, false); 
} 

attributeChangedCallback(attrName, oldVal, newVal) {  
    console.log("attr changed");  
} 

/* evaluates if the logo should be in sticky state or not */ 
_updateSticky() { 
    let scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop; 
    let breakpoint = 50; 

    if (scrollTop > breakpoint) { 
     this.setAttribute('sticky', ''); 
    } else { 
     this.removeAttribute('sticky'); 
    } 
} 
} 

window.customElements.define('header-logo', HeaderLogo); 

Answer 1

它只是你有一個錯字observedAttribute應該observedAttributes