Web Component：attributeChangedCallback未响应DISABLED属性变更

以下是逐一排查和解决的要点：

1. 确认自定义元素的定义规范 #

• 自定义元素类必须继承自HTMLElement（或其派生类，比如HTMLButtonElement），不能是普通类。
• 必须通过customElements.define('your-element-name', YourElementClass)完成注册，且标签名必须包含连字符（比如my-button，不能是mybutton）。

示例正确定义：

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['checked', 'disabled', 'value'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`属性${name}变更：${oldValue} → ${newValue}`);
  }
}

customElements.define('my-element', MyElement);

2. 区分DOM属性（Property）和HTML特性（Attribute） #

attributeChangedCallback只监听HTML特性的变更，直接修改DOM属性不会触发回调：

• 错误方式（仅改DOM属性，不触发回调）：

  const elem = document.querySelector('my-element');
  elem.disabled = true; // 这是修改DOM属性，不是特性
  

• 正确方式（修改特性，触发回调）：

  const elem = document.querySelector('my-element');
  elem.setAttribute('disabled', ''); // HTML特性设置，空字符串表示true
  // 或者移除特性
  elem.removeAttribute('disabled');
  

如果需要监听DOM属性的变更，可以在类中添加属性的getter/setter，同步更新特性：

get disabled() {
  return this.hasAttribute('disabled');
}

set disabled(value) {
  if (value) {
    this.setAttribute('disabled', '');
  } else {
    this.removeAttribute('disabled');
  }
}

3. 检查特性名称的大小写一致性 #

HTML特性是大小写不敏感的，observedAttributes中必须使用小写名称。比如不能写['Disabled']，必须是['disabled']，否则无法匹配。

4. 确认元素实例化时机 #

如果在自定义元素注册前就已经在DOM中存在该元素，需要确保注册后触发升级：

• 可以使用customElements.whenDefined('my-element')等待元素定义完成后再操作：

  customElements.whenDefined('my-element').then(() => {
    const elem = document.querySelector('my-element');
    elem.setAttribute('disabled', '');
  });
  

5. 检查shadow DOM的隔离影响 #

如果自定义元素使用了shadow DOM，注意特性是挂载在宿主元素上的，而非shadow DOM内部的元素。确保你是在宿主元素上修改特性，而非内部元素。

内容的提问来源于stack exchange，提问作者McMurphy