Web Component 自定义元素何时适合放到 connectedCallback

如果初始化需要读取元素属性、子节点、isConnected 状态，或要把事件监听接到文档中的节点上，就适合放进 connectedCallback()。constructor() 更适合创建实例时就能完成的准备工作，例如调用 super()、设置默认字段、创建 Shadow Root；不要在构造函数里假定子节点已经存在。

一句话判断：不依赖 DOM 的状态放在 constructor，依赖“已经挂到文档”的初始化放在 connectedCallback；所有连接时创建的监听、定时器和观察器，都要在 disconnectedCallback 中成对清理。

connectedCallback 解决的是“已挂载”的初始化

Web Component 的生命周期不是“构造一次、运行一次”。元素被插入文档时会调用 connectedCallback()，被移除时会调用 disconnectedCallback()。因此，初始化是否依赖挂载状态，是选择位置的第一条线索。

下面这张关系图把六个关键实体放在两个边界内：实例阶段只准备组件，文档阶段才接触真实 DOM。它表达的是职责关系，不是浏览器执行日志。

constructor 适合准备实例，不适合读取子节点

构造函数必须先调用 super()。这里可以初始化字段、创建 Shadow Root、准备方法引用，但不宜读取属性、子节点，或给元素添加属性和子节点。尤其是脚本在文档解析前注册自定义元素时，connectedCallback() 可能早于后续子节点进入 DOM。

class NoticeCard extends HTMLElement {
  static observedAttributes = ["title"];

  constructor() {
    super(); // 先建立 HTMLElement 的原型链
    this._controller = null;
    this._onClick = () => this.toggleAttribute("open");
    this.attachShadow({ mode: "open" }); // 这里只创建内部根，不读取外部子节点
    this.shadowRoot.innerHTML = "";
  }

  connectedCallback() {
    if (this._controller) return; // 防止同一次连接重复绑定资源
    this._controller = new AbortController();
    this.render(); // 此处才读取属性并更新已挂载的 Shadow DOM
    this.addEventListener("click", this._onClick, {
      signal: this._controller.signal // 断开时统一撤销监听
    });
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue || !this.isConnected) return;
    this.render(); // 属性变化只刷新视图，不重新绑定事件
  }

  disconnectedCallback() {
    this._controller?.abort(); // 释放连接阶段创建的监听
    this._controller = null;
  }

  render() {
    this.shadowRoot.querySelector("button").textContent =
      this.getAttribute("title") || "未命名通知";
  }
}

customElements.define("notice-card", NoticeCard); // 注册一次即可

这个例子把“准备”和“挂载”分开：按钮属于 Shadow DOM，可以在构造函数中创建；标题属性和事件资源则在连接时处理。AbortController 让断开与重连有明确边界，重新连接时会创建新的控制器。

让重连和属性变化不会重复绑定

最常见的坑是把 connectedCallback() 当成一次性初始化。弹窗切换、列表重排或组件被移到别的容器后，它可能再次连接。没有幂等保护，就会重复添加监听、重复启动定时器，甚至一次点击触发多次回调。

可以按下面的清单判断代码放置位置：

如果组件需要依赖轻 DOM 子节点，优先让脚本使用 defer，或让渲染函数在节点真正可用后再执行。不要用一个很长的 setTimeout 掩盖解析时机问题；那会让结果受机器速度影响。

常见问题

connectedCallback 只会执行一次吗？

不会。元素每次重新连接都可能再次调用，所以监听、定时器和观察器必须可重复创建并可清理。

属性应该在 constructor 里读取吗？

不建议。把依赖外部 DOM 的读取放到 connectedCallback；属性变化则通过 observedAttributes 和 attributeChangedCallback 更新。

为什么 connectedCallback 里查不到子节点？

通常是自定义元素在文档解析尚未完成时就连接了。使用 defer，或把依赖子节点的渲染延后到节点确实存在之后。

元素移动时为什么又触发连接和断开？

常规移动可能表现为断开再连接。若使用支持状态保留移动的 API，可结合 connectedMoveCallback 处理“位置变了但组件仍在文档中”的场景。

MDN 的 自定义元素生命周期说明 与 HTML Standard 的 Custom Elements 规范 可以作为进一步核对入口。真正落地时，先检查连接是否幂等，再检查断开是否释放资源，最后验证脚本加载时机。