Почему атрибутChangedCallback называется дважды?

Question

Я строю простой пользовательский элемент, используя custom elements 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:

[мой компонент] атрибут Foo изменен из бара в БАЗ

[мой компонент] атрибут Foo изменен из бара в БАЗ

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

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

Спасибо.

Answer 1

Поскольку custom-elements.js polyfill является альфа-версия, а не стабильным еще, вы должны использовать вместо этого polyfill from WebReflection:

• document-register-element.js v1.3

Answer 2

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

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