attributeChangedCallbackが2回呼び出されるのはなぜですか？

Question

custom elements polyfillを使用して、単純なカスタム要素を作成しています。私は属性を登録しています（observedAttributes()を使用しています）。この属性の値を変更すると、attributeChangedCallbackという関数が2回呼び出されます。ここで

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

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

は私のコンポーネント定義である：ここで

は、HTMLコードである私は、ボタンをクリックすると、そのページに

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がbarからbazに変更されました

は、[私のコンポーネント]属性fooがattributeChangedCallbackが2回呼び出され、なぜ

をBAZするバーから変わったのか？どうすればそれを避けることができますか？

この例のJSFiddleはここにある：https://jsfiddle.net/czo1355c/

感謝。

Answer 1

custom-elements.jsポリフィルは、あなたの代わりにpolyfill from WebReflectionを使用する必要があり、アルファ版と安定していない、まだので：

• document-register-element.js V1.3

Answer 2

私はあなたのjsfiddleを見直しましたが、実際にはボタンクリックで2回呼び出されるのではなく、がレンダリングされたときに最初に呼び出されます。値はfooです。第2に、あなたがボタンをクリックしたときです。

また、開発ツールを使用して、jsfiddleでそれをデバッグ、および機能を見つけてデバッグする + FはCtrl +Shiftキーを押すことができます。