Web Component的connectedCallback触发时无父元素的异常问题

问题现象 #

每刷新页面约20次会触发一次报错，错误信息如下：

wc-reorder-wrapper.min.js:153 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at Component.setupDragEvents (wc-reorder-wrapper.min.js:153:28)

错误产生于connectedCallback方法调用链中，相关核心代码片段：

connectedCallback() {
    this.setupDragEvents()
}
setupDragEvents() {
    this.parentElement.addEventListener('dragover', this.parentDragoverHandler.bind(this));
}

断点调试发现，报错时this的parentElement为null，甚至在浏览器元素面板中无法找到该组件节点，确认此时组件并未连接到DOM。使用Chrome 113浏览器。

核心疑问 #

根据文档说明，connectedCallback用于定义元素连接到DOM时的执行逻辑，但为何实际触发时组件没有父元素？connectedCallback的真实触发时机到底是什么？

相似场景示例（未复现错误，但逻辑匹配） #

JavaScript 代码 #

class Component extends HTMLElement {
  constructor() {
    super().attachShadow({
      mode: 'open'
    });
    const template = document.getElementById("TEMPLATE");
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  connectedCallback() {
    if (this.initFlag) return;
    this.initFlag = true;
    console.log(`Connected: ${this.localName}`)
    console.log(`ParentNode`, this.parentNode)
    console.log(`ParentElement`, this.parentElement)
  }
}
window.customElements.define('wc-foo', Component);

HTML 代码 #

<div class="parent">
  <wc-foo></wc-foo>
</div>

<template id="TEMPLATE">
    <style>
    div {
        margin: 1px;
    }
    </style>
    <div>
        Web component
    </div>
</template>

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