Custom Element Upgrade and Reconnection

Working case

A permit dashboard renders case 47 as a status label inside a case-status-card tag. The page can submit the review even if the component bundle fails. Later, the definition arrives and attaches its controls. The host changes the status attribute from pending to returned, then moves the card into a filtered list. A careless connected callback adds another listener and another polling timer. After three moves, one click sends three requests. The contract must keep the visible label correct before upgrade and perform only one active subscription while connected.

Implementation boundary

function shouldAttachCaseFeed(state) {
  return state.connected && !state.feedAttached && state.caseId !== null;
}
console.log(shouldAttachCaseFeed({ connected: true, feedAttached: true, caseId: 47 }));
// Output: false

Treat attributes as input and internal rendering as a projection, not as the only source of truth. Make connection idempotent: create listeners and observers only when absent, and release them on disconnection. If a framework removes a node and creates another, do not transfer hidden mutable state without an explicit key. Avoid assuming that a move is always a permanent removal; the host may reconnect immediately. Do not fetch privileged data in the constructor because attributes, parent context, and ownership can still change. An event emitted after disconnection should be ignored by the host if the case selection has changed.

Cost and boundaries

Registration cost is small per element name, but each live instance may retain event handlers, an observer, cached records, and a timer. A list of n case cards can turn one polling interval into n network loops. Replace polling with one host-owned data source when many cards share the same case feed. Attribute updates should be O(1) for a bounded status field; replacing an entire shadow tree per change can discard focus and expand work with subtree size. Measure upgrade delay and listener counts in a long-lived dashboard.

Failure trace

Render the page with the component script blocked. The status and server submission must remain usable. Then register the element after markup exists and confirm that its initial attribute is processed. Connect, disconnect, and reconnect the same node four times while counting network requests and event listeners. Change the case ID during a delayed response; the old result must not paint the new case. Simulate duplicate registration from two bundles and require the loader to avoid defining the same name twice. Move the card during a keyboard action and confirm focus is still understandable.

Verification

Pre-upgrade markup has a usable label.
A reconnect leaves exactly one active feed.
An old case response cannot update a new case.

Practice drill

Build a component for statuses pending, returned, and cleared. Leave its initial label in light DOM. Upgrade after a delayed script load, change the status twice, move it between lists, and remove it. Instrument active subscriptions and prove the count returns to zero. Repeat with a host that replaces rather than moves the node. The host contract should state which attributes are stable, which events are emitted, and what happens before definition.

Decision note

A reusable element needs a readable pre-upgrade state and a lifecycle that tolerates repeated connection.

Common Mistakes

Registering the same custom element name twice.
Starting timers every time connectedCallback runs.
Replacing focused content on every attribute update.

Connected practice

Build Project: interoperable case-decision control and review Web Development: components and compatibility quiz.