2017-02-10 14 views
1

Проблема заключается в следующем, когда я обновляю attr, липкий либо в devtool, либо с помощью js-кода. Я не могу запустить атрибутChangedCallback. Метод _updateSticky() отлично работает при прокрутке, с добавлением и удалением липкого attr.attributeChangedCallback not firing

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

ответ

2

Его только что у вас есть опечатка observedAttribute должен быть observedAttributes

+0

Спасибо diden't заметить, что один. Очень добрый. –