Web Component内DOMContentLoaded事件不触发的相关问题咨询

• Web Component和ShadowDOM 没有独立的DOMContentLoaded事件，该事件仅属于顶层document对象，只会在顶层页面初始DOM解析完成、所有同步脚本执行完毕后触发一次，不存在ShadowDOM私有的DOMContentLoaded事件，也不存在继承上层DOM事件状态的逻辑。
• 你遇到监听不触发的直接原因和你补充的加载时机完全吻合：组件异步加载的时间晚于父页面DOMContentLoaded的触发时间，此时再绑定该事件的监听，自然不会触发回调。

• 你在Web Component的上下文中执行document.addEventListener()这类代码，绑定的监听实际作用于上层的全局document对象，和ShadowDOM没有关系。ShadowDOM的隔离范围仅包含DOM结构、CSS样式、内部元素事件的冒泡路径调整，不会修改全局API的指向。

你可以把原组件依赖DOMContentLoaded的逻辑做如下调整，即可在Web Component内正常运行：

connectedCallback() {
  // 先判断当前document的就绪状态
  if (document.readyState === 'loading') {
    // 还在加载中，绑定DOMContentLoaded监听
    document.addEventListener('DOMContentLoaded', () => this.initLazyLoad())
  } else {
    // DOMContentLoaded已经触发过，直接执行懒加载逻辑
    this.initLazyLoad()
  }
}

如果你的懒加载逻辑只需要依赖组件自身ShadowDOM内的DOM结构，不需要等待整个页面加载完成，也可以直接在connectedCallback中调用初始化逻辑，不需要绑定全局document事件。

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