Reputation: 43
Im just starting out with web components and I cant seem to figure out why my attributeChangedCallback isnt firing;
I've been comparing it to a component ive created where everything is working as it should.
things I've checked:
But if i try and do anything inside attributeChangedCallback ( example is just logging name) its not firing.
i am sure I'm missing something really simple??
class HamburgerMenu extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="164" height="102" fill="none">
<g stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="20">
<path id="top" d="M10 92L154 92"/>
<path id="middle" d="M10 50.8L154 50.8"/>
<path id="bottom" d="M10 10L154 10"/>
</g>
</svg>`;
this.svg = this.shadowRoot.querySelector("svg");
this.svg.addEventListener("click", this.toggleStatus.bind(this));
}
static get observedAttributes() {
return ["isOpen"];
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(name, oldValue, newValue);
}
get isOpen() {
return this.getAttribute("isOpen");
}
set isOpen(val) {
if (val) {
this.setAttribute("isOpen", val);
} else {
this.removeAttribute("isOpen");
}
}
toggleStatus() {
this.setAttribute("isOpen", String(!eval(this.getAttribute("isOpen"))));
}
}
if (!window.customElements.get("hamburger-menu")) {
window.customElements.define("hamburger-menu", HamburgerMenu);
}
<hamburger-menu></hamburger-menu>
Upvotes: 4
Views: 3875
Reputation: 21301
Attributes must be lowercase, change "isOpen" to "isopen" and it will work
see SO answer: are html5 data attributes case insensitive?
Your use of eval is creative; but there is a toggleAttribute
method:
see: https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute
Your code runs because you only interact with the shadowRoot in the constructor
.
For other DOM related code you may have to wait till the connectedCallback
(now not in your code) runs.
For lifecycle see: https://andyogo.github.io/custom-element-reactions-diagram/
Upvotes: 7