Connected callback firing for component that does not have a parent element

Question

I have a web component, thats quite large and complicated, but here is the part that is giving me an issue. About once in every 20 times I reload the page I get this error (within connected call back, it does not have a parent element):

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)

The error is being generated in the connectedCallback:

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

this does not have a parentElement, how can it be connected then? To quote MDN

Inside the method connectedCallback, we define all the functionality the element will have when the element is connected to the DOM

If I set a breakpoint when there is no parent, and I console.log(this) then right click on it and select Reveal in elements panel it says: Node cannot be found in the current page. ... which confirms it is not connected to the DOM, despite is connected callback being fired.

Using Chrome 113

Why does the element not have a parent element in connectedCallback, what is connectedCallback for then?