Web Components attributeChangedCallback 为什么没有触发

Web Components 中，attributeChangedCallback() 没有触发，通常不是回调签名写错，而是监听名单和修改路径没有对上：类里没有正确声明 observedAttributes，或者代码改的是 JavaScript property，而不是 HTML attribute。先把这两条通道分开，问题基本就能定位。

回调只响应 observedAttributes 列出的 attribute 变化。要触发它，使用 setAttribute()、removeAttribute()，或在 property setter 内显式反射到 attribute；单独执行 element.status = "ready" 不会自动触发。

先确认回调到底监听哪条属性通道

自定义元素先通过 customElements.define() 注册，浏览器才知道某个标签对应哪个类。之后，类中的 observedAttributes 会提供一份观察名单。名单里没有 status，即使执行 setAttribute("status", "ready")，也不会进入回调；把 getter 写成普通实例方法同样无效。

可以先用下面这个最小组件排除注册和监听问题：

class StatusBadge extends HTMLElement {
  // 只监听这个 HTML attribute，名称保持稳定并使用小写。
  static get observedAttributes() {
    return ["status"];
  }

  // 元素插入文档时负责首次渲染，不能只依赖属性回调。
  connectedCallback() {
    this.render();
  }

  // 只有 observedAttributes 中的属性变化才会走到这里。
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "status" && oldValue !== newValue) {
      this.render();
    }
  }

  // 把属性值放进文本节点，避免把外部值当成 HTML 解析。
  render() {
    this.textContent = this.getAttribute("status") || "unknown";
  }
}

// 注册后，浏览器才会把 status-badge 升级为自定义元素。
customElements.define("status-badge", StatusBadge);

const badge = document.querySelector("status-badge");
// 这条语句会改变 attribute，因此会触发回调。
badge.setAttribute("status", "ready");

如果这段代码能更新文字，再把自己的标签名、属性名和回调逻辑逐项替换回去。排查时不要一次加入框架封装或复杂渲染逻辑，否则很难判断是监听没有生效，还是回调已经执行但 UI 没有更新。

用 property 反射把组件 API 接回 attribute

很多组件希望调用方写成 badge.status = "ready"，这本身没有问题，但它只是给 JavaScript 对象设置 property。若组件内部仍然依赖 attributeChangedCallback()，就要在 setter 中明确调用 setAttribute()，让两条通道汇合。

class StatusBadge extends HTMLElement {
  // 监听名单仍然只放 attribute 名称，而不是 property 名称。
  static get observedAttributes() {
    return ["status"];
  }

  get status() {
    // property 的读取统一回到 attribute，避免两份状态不一致。
    return this.getAttribute("status") || "unknown";
  }

  set status(value) {
    // property 赋值显式反射，后续由 attributeChangedCallback 统一渲染。
    this.setAttribute("status", String(value));
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // 同值更新不重复做界面工作，回调内不要再次写同一个 attribute。
    if (name === "status" && oldValue !== newValue) {
      this.render();
    }
  }

  render() {
    this.textContent = this.status;
  }
}

// 自定义元素名必须包含连字符，避免与内置 HTML 标签冲突。
customElements.define("status-badge", StatusBadge);

const badge = document.querySelector("status-badge");
// setter 会反射到 status attribute，继而进入 attributeChangedCallback。
badge.status = "ready";

反过来，如果只需要从 HTML 读取配置，也可以只保留 attribute API，不必强行设计 property。关键是选定一个状态来源，并让另一个入口明确同步过去。不要在回调中重新给同一个 property 赋值，又让 setter 再写回同一个 attribute，这会形成递归更新。

四步检查初始值、名称和更新边界

还有两个容易忽略的边界。第一，元素在定义前已经带有被观察属性时，注册和升级过程会把已有状态纳入自定义元素生命周期，但稳定的组件仍应保留 connectedCallback() 的首次渲染。第二，删除属性会把 newValue 变成 null，渲染函数需要把它转换为默认状态，而不是直接调用字符串方法。

相关问题

observedAttributes 可以写成普通方法吗？

不建议。它应作为类的静态 getter 或静态字段提供观察名单；普通实例方法不会被自定义元素注册流程当作名单读取。

修改 data-status 为什么没有触发 status 回调？

因为这是两个不同的 attribute 名称。观察 status 时，必须修改同名的 status；如果业务确实使用 data-status，就把它加入观察名单并在回调中处理它。

回调里能直接修改同一个 attribute 吗？

可以，但要有明确的终止条件。更稳妥的做法是让回调只根据新值渲染，属性规范化放在 setter 或独立方法里，避免回调和反射互相触发。

把“观察名单”“attribute 修改”“property 反射”“首次渲染”四件事拆开后，attributeChangedCallback() 不触发就不再是玄学：先看通道，再看名称，最后看渲染和递归边界。