North star: visual AND feature parity.
Problem
The transform rewrites the DOM (e.g. a JS hamburger toggle -> core/button or dropped, #mobile-nav deduped), but the original JS targets the source selectors (.nav-toggle / #mobile-nav). So when that JS is enqueued it loads and silently no-ops — the markup it needs no longer exists. Behavior is "preserved" on paper but inert.
Ask
Make a per-interactive-region decision explicit:
- Rebuild: emit native interactivity (core blocks / Automattic products / Interactivity API) and DROP the original JS for that region. Robust, DOM-independent.
- Preserve: keep the region's markup verbatim as a
core/html runtime island AND carry its JS (via the companion plugin, scoped to the island). Works because the markup is untouched, so the original selectors still match.
Hard rule: verbatim JS only on verbatim markup. Never enqueue original JS to drive transformed blocks. The recognizer/island machinery should tag each region preserve-vs-rebuild so downstream (JS materialization, diagnostics) can rely on it.
North star: visual AND feature parity.
Problem
The transform rewrites the DOM (e.g. a JS hamburger toggle -> core/button or dropped, #mobile-nav deduped), but the original JS targets the source selectors (.nav-toggle / #mobile-nav). So when that JS is enqueued it loads and silently no-ops — the markup it needs no longer exists. Behavior is "preserved" on paper but inert.
Ask
Make a per-interactive-region decision explicit:
core/htmlruntime island AND carry its JS (via the companion plugin, scoped to the island). Works because the markup is untouched, so the original selectors still match.Hard rule: verbatim JS only on verbatim markup. Never enqueue original JS to drive transformed blocks. The recognizer/island machinery should tag each region preserve-vs-rebuild so downstream (JS materialization, diagnostics) can rely on it.