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);
observedAttributes
을해야이 단지 당신이 하나를 발견 diden't 감사드립니다. 매우 친절하다. –