Constructed hook fires before subclass constructor completes during upgrade

[DmitrySharabin]

Summary

When a custom element is already in the DOM before customElements.define() runs (upgrade scenario), Firefox may fire connectedCallback during super() — before the subclass constructor completes. This causes nude-element's "constructed" hook to fire prematurely, crashing when it accesses subclass properties that haven't been initialized yet.

Chrome and Safari are not affected.

Error

Uncaught (in promise) TypeError: can't access property "space_picker", this._el is undefined

Observed with <color-picker> in Zen (Firefox-based) when the element is in HTML and loaded via a bundled <script type="module">.

Root Cause

In src/element/members.js:

constructed () {
    this.$hook("constructor");
    // Microtask: fires AFTER the full constructor chain
    Promise.resolve().then(() => {
        this.$hook("constructed", undefined, { once: true });
    });
},

connectedCallback () {
    // Fires "constructed" SYNCHRONOUSLY — before the microtask
    this.$hook("constructed", undefined, { once: true });
    this.$hook("connected");
},

The design assumes connectedCallback always fires after the full constructor chain. This holds in Chrome and Safari, but in Firefox during element upgrade, connectedCallback appears to fire synchronously during super() (e.g., when attachShadow() or shadowRoot.innerHTML connects child nodes to an already-connected host). The "constructed" hook then fires before the subclass constructor completes.

The "constructed" hook triggers the props plugin (src/plugins/props/index.js), which calls initializeFor() — iterating observed attributes and running the full prop getter/setter/converter chain. This accesses shadow DOM element references that the subclass hasn't initialized yet, causing the crash.

Possible Fix

A construction guard in connectedCallback could prevent premature firing:

// In constructed():
this[constructing] = true;
Promise.resolve().then(() => {
    this[constructing] = false;
    this.$hook("constructed", undefined, { once: true });
});

// In connectedCallback():
if (!this[constructing]) {
    this.$hook("constructed", undefined, { once: true });
}
this.$hook("connected");

Where constructing is a Symbol (can't use a private field since this is a plugin that adds to the prototype via provides).

Related

Split from #89 which originally covered both this and the styles/bundler issue.

[DmitrySharabin]

Also reproducible via esm.sh (not just Firefox)

esm.sh triggers the same crash. When loading color-elements via <script src="https://esm.sh/color-elements/color-picker">, the element is already in the DOM when customElements.define() runs, causing the same upgrade timing issue.

The error is identical:

TypeError: Cannot read properties of undefined (reading 'space_picker')
    at h.changed (color-picker.mjs)
    at h.constructed (nude-element/src/plugins/props/index.mjs)

This happens in Chrome as well — it's not Firefox-specific. Any scenario where elements exist in the DOM before define() runs will trigger it.