Почему attributeChangedCallback вызывается дважды?

Question

Я строю простой пользовательский элемент, используя пользовательские элементы polyfill. Я зарегистрировал атрибут для просмотра (используя observedAttributes()), и когда я изменяю значение этого атрибута, функция attributeChangedCallback называется дважды.

Вот HTML-код:

<my-component id="compo" foo="bar"></my-component>

<button id="myBtn">Change attribute value</button>

Вот мое определение компонента:

class MyComponent extends HTMLElement {
  constructor() {
    super();
  }

  static get observedAttributes() {
    return ['foo'];
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    console.log('[my component] attribute', attrName, 'changed from', oldVal, 'to', newVal);
  }
}

window.customElements.define('my-component', MyComponent);

// Change value of the component attribute
$('#myBtn').click(() => $('#compo').attr('foo', 'baz'));

На этой странице, когда я нажимаю на кнопку, у меня есть следующие журналы в console.log:

Атрибут [my component] foo изменен с бара на баз

Атрибут [my component] foo изменен с бара на баз

Почему attributeChangedCallback звонил дважды? Как я могу избежать этого?

JSFiddle этого примера находится здесь: https://jsfiddle.net/czo1355c/

Благодарю.

Answer 1

Так как custom-elements.js polyfill является альфа-версией и еще не стабильна, вместо нее следует использовать polyfill из WebReflection:

• document-register-element.js v1.3

Answer 2

Я просмотрел ваш jsfiddle, и он не вызывается дважды при нажатии кнопки, а сначала вызывается, когда <my-component id="compo" foo="bar"></my-component> отображается, так как вы устанавливаете значение foo; и во-вторых, когда вы нажали кнопку.

Вы также можете отладить его в jsfiddle, используя инструменты разработчика, и нажмите Ctrl+Shift+F, чтобы найти и отладить функцию.