Client navigation between pages with different chrome stacks the old header over the new page's header

What happens

Client-side navigation from a page to another page that shares the site header/footer, where the pages are not structured identically, leaves the old header in place and puts the new page's header inside the swapped region. The result is two headers stacked.

In https://github.com/stacksjs/the-settlers-iii-remake before it moved to a shared shell: / had <header>, <main id="main">, <footer>; /login had <header>, a dashboard component (no <main>), <footer>. Clicking "Sign in" on / rendered a second header above the login card. After the swap the body was A, HEADER, MAIN#main, FOOTER, with the login page's own header, card and footer inside main. A hard load of /login was fine.

From the served router, the swap target is y.querySelector(Vt) || y.querySelector("[data-stx-content]") || y.querySelector("main") and, when none exists in the incoming document, the router does location.href = e. Here the incoming document did have a main (inside the auth component), so it swapped that and kept the outgoing page's chrome.

Expected

Either the swap replaces only the matching region and drops the incoming page's chrome, or a page whose chrome differs from the current one falls back to a full load. Today the only way to get a correct result is to give every page the same header/main/footer structure, or to remove <main> from a page that must always load fully (what this project did for its game page).

stx 0.2.756.

Not fixed yet. Workaround in use: give every page the same header, main and footer structure, and keep a page with its own chrome free of a main element so the router falls back to a full load (the Settlers III remake does both). A fix wants the router to compare the incoming page's layout group with the current one and load fully when they differ, with a regression that navigates between two pages of different chrome.