为什么attributeChangedCallback被调用两次？

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从bar更改为baz

     

[我的组件]属性foo从bar更改为baz

为什么attributeChangedCallback被调用两次？我怎么能避免它？

此示例的JSFiddle位于：https://jsfiddle.net/czo1355c/

感谢。

Answer 1

我查看了你的jsfiddle，它实际上并没有在按钮点击时被调用两次，而是在呈现<my-component id="compo" foo="bar"></my-component>时首先调用，因为你设置了foo的值;其次，当你点击按钮时。

您也可以使用开发人员工具在jsfiddle上调试它，然后按 Ctrl + Shift + F 来查找和调试该函数。

Answer 2

由于custom-elements.js polyfill是alpha版本且尚未稳定，因此您应该使用polyfill from WebReflection：

• document-register-element.js v1.3