如何让Web组件在DOM加载完成后执行自身上下文内的代码？

针对你遇到的问题，这里有几个实用的解决思路：

1. 用箭头函数绑定组件上下文 #

在connectedCallback里监听DOMContentLoaded时，使用箭头函数包裹业务逻辑，箭头函数会自动继承外层的this（也就是当前Web组件实例），这样就能在回调里正常访问组件的属性和方法：

class MyWebComponent extends HTMLElement {
  connectedCallback() {
    // 监听DOM加载完成，且只执行一次
    document.addEventListener('DOMContentLoaded', () => {
      this.queryExternalElements(); // 这里的this指向组件实例
    }, { once: true });
  }

  queryExternalElements() {
    // 在这里查询<body>中的目标元素
    const targetEl = document.body.querySelector('#target-element');
    if (targetEl) {
      // 执行交互逻辑
      console.log('找到目标元素', targetEl);
    }
  }
}
customElements.define('my-web-component', MyWebComponent);

2. 提前检查DOM状态，避免错过时机 #

如果组件挂载时DOMContentLoaded已经触发（比如组件动态加载较晚），上面的监听会失效。可以先检查document.readyState，如果DOM已经加载完成，直接执行方法；否则再监听事件：

connectedCallback() {
  const init = () => {
    this.queryExternalElements();
  };

  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init, { once: true });
  }
}

3. 用bind()强制绑定上下文 #

如果你不想用箭头函数，也可以用bind()把组件实例绑定到回调函数上，确保this指向正确：

connectedCallback() {
  document.addEventListener('DOMContentLoaded', this.queryExternalElements.bind(this), { once: true });
}

额外提示：针对动态元素的场景 #

如果目标元素是动态添加的（不是DOM初始加载的一部分），DOMContentLoaded可能也无法覆盖这种情况，这时可以用MutationObserver监听body的子节点变化，直到目标元素出现再执行逻辑：

connectedCallback() {
  const observer = new MutationObserver((mutations) => {
    const targetEl = document.body.querySelector('#target-element');
    if (targetEl) {
      this.queryExternalElements();
      observer.disconnect(); // 找到后停止监听
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
}

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