Why does document's readystate change from "complete" to "loading"?

Please take a look at the following code:

this.detachedWin = window.open(window.origin + "/@/tab","Detached","menubar=0,toolbar=0,personalbar=0,status=0");
  
this.doc = this.detachedWin.document;

setInterval(() => {
  console.log(this.doc === this.detachedWin.document,this.detachedWin.document.readyState);
  this.doc = this.detachedWin.document;
}, 10);

JSFiddle

If you take a look at your console log, you see something like this:

I don't underestand why the ready state of document is "complete" at the first time and what is the reason it changes to loading after that? I expect that the ready state to be "loading" for the first time.

from Why does document's readystate change from "complete" to "loading"?