Two DOM/React gotchas hit while building inline table editing and nested confirmation dialogs: (1) a confirmation <dialog> rendered as a React child of another open <dialog> closes the outer one when it opens or closes, because React dispatches the non-bubbling native "close" event to every onClose handler up the React tree (StrictMode's effect double-run triggers it immediately). (2) Reading form.id on an HTMLFormElement returns a child control named "id" (named-property access), so code that sets el.setAttribute("form", form.id) on fields associated later writes "[object HTMLInputElement]".

How to structure a non-trivial interactive application (100+ lines of JS, multiple UI states, user interactions) in a single HTML file without it becoming an unmaintainable mess. Single-file apps are ideal for personal tools, demos, prototypes, and utilities because they have zero build step, zero dependencies, work offline, and can be shared by email or dropped into any web server. But without structure, they quickly become spaghetti: DOM reads mixed with business logic, state scattered across DOM attributes and global variables, event handlers that directly manipulate other parts of the UI, and no clear flow of data.