Personal utility · Lifecycle inspection

Teardown and reinitialize lab

Interact with a progressively enhanced form, destroy its plugin instance, compare the resulting DOM with the original author markup, and initialize it again.

Scenario

A single-page application replaces or suspends a quiz view and needs evidence that plugin listeners and authored markup can be handled safely across lifecycle changes.

User goal: inspect every lifecycle transition instead of trusting a hidden test.

Try it

  1. Answer the quiz so generated state and feedback are visible.
  2. Activate “Destroy and audit” and read both cleanup checks.
  3. If the exact comparison fails, restore the captured author baseline.
  4. Reinitialize and confirm the form works again with one listener set.

Lifecycle controls

These controls sit outside the quiz root. “Restore author baseline” is a host-page action; it replaces the form with the pristine clone captured before initialization.

Plugin initialized from semantic author markup.

Lifecycle artifact audit has not run yet.

Exact author-DOM comparison has not run yet.

Progressively enhanced quiz

The complete fieldset, answers, labels, buttons, feedback containers, and no-script answer are authored in HTML before the module initializes.

What is the safest first choice for a disclosure trigger?

Choose one answer.

Need a hint?

Start with an element that already supports keyboard activation.

Accessibility notes

  • The authored form remains meaningful before enhancement and includes a no-JavaScript answer fallback.
  • Lifecycle controls are real buttons with a separate polite status region.
  • After a lifecycle action, focus remains on the activating external button.
  • Audit results use explicit pass/fail text and do not rely on color.
  • The page has no required motion and preserves package forced-colors behavior.
  • Exact DOM equality is stricter than functional cleanup and may expose residual enhanced attributes or content.

Developer notes

The root selector is #lifecycle-quiz[data-a11y-quiz]. The demo captures outerHTML and a deep clone before calling createQuizForm(). 

instance.destroy();
const exactMatch = form.outerHTML === baselineMarkup;

// Optional host-level restoration:
host.replaceChildren(baselineClone.cloneNode(true));

Reinitialization calls createQuizForm() on the current form. The page imports only ../dist/index.js and ../dist/styles.css.