自定义HTMLElement的connectedCallback中textContent为空的原因咨询

这个问题我之前在早期Chrome版本里踩过坑，本质是Chrome 63对自定义元素V1规范的实现存在时机差异。

按照规范，connectedCallback确实应该在元素被添加到DOM后触发，但在Chrome 63中，当自定义元素是同步解析的时候（比如直接写在HTML里的<my-component>），浏览器会先创建元素并立即触发connectedCallback，但此时标签内部的文本内容还没被浏览器解析和插入到元素节点中——简单说就是，元素先“挂”到DOM树上了，它的子内容还在排队等着被解析，所以你此时拿textContent自然是空字符串。

解决方法 #

这里有几个靠谱的方案可以解决这个问题：

• 用requestAnimationFrame延迟获取：
  借助浏览器的渲染周期，让代码等到下一次重绘前执行，此时子内容已经被解析完成：

  connectedCallback() {
    requestAnimationFrame(() => {
      console.log(this.textContent); // 现在能拿到需要的文本内容了
    });
  }
  

• 使用MutationObserver监听子节点变化：
  如果需要更精准地捕获内容插入的时机，可以用观察者模式监听元素的子节点变化，当文本被添加时再处理：

  connectedCallback() {
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        if (mutation.addedNodes.length) {
          console.log(this.textContent);
          observer.disconnect(); // 拿到内容后就停止监听，避免重复触发
          break;
        }
      }
    });
    observer.observe(this, { childList: true });
  }
  

• 监听DOMContentLoaded事件（适合全局场景）：
  如果你的组件不需要立即获取内容，也可以等整个文档加载完成后再读取：

  connectedCallback() {
    document.addEventListener('DOMContentLoaded', () => {
      console.log(this.textContent);
    }, { once: true }); // 只触发一次
  }
  

另外补充一下：这个问题在后续的Chrome版本（比如Chrome 67+）中已经被修复了，connectedCallback会等到元素及其所有子内容都完全插入DOM后才触发，所以升级浏览器也能解决，但如果需要兼容旧版本，上面的方案就很有用。

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