web components 中闭包因意外捕获 shadowroot 并被长生命周期对象持有导致内存泄漏，核心是闭包→shadowroot→host→dom 的强引用链未清理。

Web Components 中闭包因 shadowRoot 引用导致内存泄漏，核心问题不是 shadowRoot 本身，而是闭包意外捕获了它，且该闭包被长生命周期对象（如全局事件总线、定时器、document、window）持续持有——导致整个 shadow tree 及其内部节点无法被垃圾回收。

识别 shadowRoot 相关闭包泄漏的关键路径

这类泄漏往往隐蔽，因为 shadowRoot 是轻量对象，但它的 host 元素 和 内部 DOM 节点树 会被强引用链拖住。重点看三条交叉引用链：

• 闭包 → shadowRoot → host 元素 → 父文档节点：常见于在 connectedCallback 中为 shadowRoot 内元素绑定事件，回调闭包直接访问 this.shadowRoot 或其中的 querySelector 结果，却未在 disconnectedCallback 清理
• 闭包 → this（自定义元素实例）→ shadowRoot → 大型模板或动态插入的子组件：例如在 render() 方法中生成闭包函数并传给子组件 props，而子组件又挂载到 shadowRoot，形成双向持有
• 闭包 → window/document.addEventListener + this.shadowRoot 内部节点引用：比如监听 window.resize 后操作 shadowRoot.querySelector('.panel')，该闭包即使组件已断开，仍通过 window 持有对 shadowRoot 子节点的引用

Chrome DevTools 实操定位步骤

不用猜，靠堆快照直击根源：

• 在组件挂载后拍第一张 Heap Snapshot；
• 触发多次“添加 → 移除”该自定义元素（确保 shadowRoot 已 detach）；
• 等待几秒，再拍第二张快照，切换 Comparison 视图；
• 筛选 Constructor 为 HTMLDivElement（或你实际使用的 shadow host 标签），勾选 Show detached elements only；
• 点开任一 Detached 节点，在右侧 Retainers 中查找 (closure) 条目；
• 展开该 closure 的引用链，若出现 shadowRoot → host → your-custom-element → function → closure，即确认泄漏源在此。

典型错误写法与安全替代方案

问题不在用 shadowRoot，而在怎么用：

• ❌ 错误：匿名闭包 + 未解绑
  connectedCallback() {
    this.shadowRoot.addEventListener('click', (e) => {
      console.log(this.shadowRoot.querySelector('#status').textContent);
    });
  }
• ✅ 正确：具名处理函数 + 显式移除
  constructor() {
    super();
    this._clickHandler = this._handleClick.bind(this);
  }
  connectedCallback() {
    this.shadowRoot.addEventListener('click', this._clickHandler);
  }
  disconnectedCallback() {
    this.shadowRoot.removeEventListener('click', this._clickHandler);
  }
• ❌ 错误：闭包捕获整个 shadowRoot 对象
  const updatePanel = () => {
    this.shadowRoot.getElementById('panel').innerHTML = data;
  };
  setInterval(updatePanel, 2000); // 定时器让 this.shadowRoot 永远活
• ✅ 正确：参数化 + 清理守卫
  const updatePanel = (root) => {
    if (!root || !root.isConnected) return;
    root.getElementById('panel').innerHTML = data;
  };
  this._interval = setInterval(() => updatePanel(this.shadowRoot), 2000);
  // disconnectedCallback 中：clearInterval(this._interval);

额外注意：slot、delegatesFocus 与跨 shadow 边界的引用

当使用 或设置 delegatesFocus: true 时，外部 light DOM 元素可能被 shadowRoot 内部逻辑间接引用。若闭包中调用了 this.shadowRoot.assignedNodes() 或监听了 slotchange 事件并闭包捕获了 assignedNodes 返回的 NodeList，也要在 disconnectedCallback 中清空缓存或置 null：

• 避免长期持有 assignedNodes() 返回的数组 —— 它是 live collection，会隐式维持对 light DOM 节点的引用
• slotchange 回调中不要直接赋值 this._cachedSlotNodes = this.shadowRoot.querySelector('slot').assignedNodes()
• 改用一次性快照：this._cachedNodes = [...this.shadowRoot.querySelector('slot').assignedNodes()]