WTF connectedCallback #4

by WebComponents

HTML

<script>
    const el = (tag = "BR") => document.createElement(tag);
    const LOG = (name, comp, ...args) => {
        let p = ["readyState:", document.readyState, " - ", name, comp.nodeName, " innerHTML: ", comp.innerHTML || "empty!", ...args];
        console.log(...p);
        document.body.append(el(), ...p.join(" "), el(), el());
    }
    class BaseClass extends HTMLElement {
        constructor() {
            super();
            this.onclick = () => {
                LOG("Click", this);
                document.body.append(this);
            }
        }
    }
    document.addEventListener("readystatechange", console.log, {
        once: true
    })
</script>

<script id="MY workaround">
    customElements.define("my-component", class extends BaseClass {
        connectedCallback() {
            LOG("Init", this);
            setTimeout(() => {
                LOG("Access", this); // Hello World!
            });
        }
    });
</script>
<my-component>my-component</my-component>

<script id="Your Workaround">
    customElements.define("your-component", class extends BaseClass {
        connectedCallback() {
            LOG("Init", this);
            if (document.readyState == "loading") {
                document.addEventListener("readystatechange", () => {
                    LOG("Access", this); // Hello World!
                }, {
                    once: true
                })
            }
        }
    });
</script>
<your-component>your-component</your-component>
<h1>DOM parsed</h1>