2017-02-10 7 views
1

문제는 다음과 같습니다. devtool 또는 js 코드에서 attr sticky를 업데이트 할 때 fire가 발생하도록 attributeChangedCallback을 가져올 수 없습니다. _updateSticky() 메서드는 끈적 끈적한 attr을 추가하고 제거 할 때 스크롤 할 때 잘 실행됩니다.attributeChangedCallback가 실행되지 않음

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

+0

observedAttributes을해야이 단지 당신이 하나를 발견 diden't 감사드립니다. 매우 친절하다. –