Skip to content
Advertisement

attributeChangedCallback() always called twice ending up with multiple event listeners

Playing around with custom elements, I’m trying to get a click event fired depending on custom element attribute’s value. But using the attributeChangedCallback() method (along with the connectedCallback() method) I’m ending up with multiple event listeners.

class HelloWorld extends HTMLElement {
  static get observedAttributes() {
    return ['attribute1', 'attribute2'];
  }

  get attribute1() {
    return this.getAttribute('attribute1');
  }
  set attribute1(val) {
    if (val) {
      this.setAttribute('attribute1', val);
    } else {
      this.removeAttribute('attribute1');
    }
  }

  get attribute2() {
    return this.getAttribute('attribute2');
  }
  set attribute2(val) {
    if (val) {
      this.setAttribute('attribute2', val);
    } else {
      this.removeAttribute('attribute2');
    }
  }

  constructor() {
    super();
  }

  connectedCallback() {
    this.textContent = 'Hello World';
    update(this);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    update(this);
  }
}
customElements.define('hello-world', HelloWorld);

function update(el) {
  if (el.attribute1 === 'foo') {
    el.addEventListener('click', e => {
      el.textContent = (el.textContent.indexOf(' (') != -1 ? el.textContent.substring(0, el.textContent.indexOf(' (')) : el.textContent) + ' (clicked ' + (el.textContent.match(/d+/) ? parseInt(el.textContent.match(/-?d+/)[0]) + 1 : 1) + ' times)';
    });
  } else if (el.attribute1 === 'bar') {
    el.addEventListener('click', e => {
      el.textContent = (el.textContent.indexOf(' (') != -1 ? el.textContent.substring(0, el.textContent.indexOf(' (')) : el.textContent) + ' (clicked ' + (el.textContent.match(/d+/) ? parseInt(el.textContent.match(/-?d+/)[0]) - 1 : 1) + ' times)';
    });
  }
}
hello-world {
  cursor: pointer;
}
<hello-world attribute1="foo" attribute2=""></hello-world>

Why is the attributeChangedCallback() method always called twice and therefore adds two event listeners? How to avoid this? What would be best practice?

Advertisement

Answer

It is called attributeChangedCallback, so fires on every single attribute change, including init when the element is added to the DOM

Attach listeners in the connectedCallback, but that can run again if you move the element in the DOM, so you have to remove them in the disconnectedCallback

Easier might be to use an inline EventHandler, there can only be one on an element.

customElements.define('hello-world', class extends HTMLElement {
  static get observedAttributes() {
    return ['attribute1', 'attribute2'];
  }
  get attribute1() {
    return this.getAttribute('attribute1');
  }
  set attribute1(val) {
    this.toggleAttribute('attribute1', val);
  }
  get attribute2() {
    return this.getAttribute('attribute2');
  }
  set attribute2(val) {
    this.toggleAttribute('attribute2', val);
  }
  connectedCallback() {
    this.count = 0;
    this.innerHTML = `Hello World clicked: <span>${this.count}</span> times`;
    this.onclick = (evt) => {
      this.count++;
      this.querySelector("span").innerHTML = this.count;
    }
  }
  attributeChangedCallback(name, oldValue, newValue) {
    console.log("attributeChangedCallback", name, oldValue, newValue);
  }
});
hello-world {
  cursor: pointer;
}
<hello-world attribute1="foo" attribute2=""></hello-world>
constructor() {
  super()
}

is not required, a non existing constructor will execute the constructor from its parent.. which is what super() does.

If you want to prevent multiple listeners you could try a method:

addListeners(){
  .. add your listeners

  this.addListeners = () => {}; // overload; Don't run its original code again
}

Also note Listeners you add on the Element (or its contents) are automaticall garbage collected/removed when the element is removed from the DOM.
Any Listeners you add on other DOM elements (eg. document) you have to remove yourself in the disconnectedCallback

Advertisement