Snapshot DOM can be re-used when showing preview of the same location

[armstrjare]

When a user navigates back to a cached page and then clicks a link to the same URL, the cached snapshot DOM can be reused without firing the turbo:before-cache event. This can lead to invalid DOM state being re-attached if custom teardown behavior relies on turbo:before-cache, as the snapshot isn't properly torn down before reuse.

Scenario

The issue occurs when Snapshot A.1 is reused without triggering turbo:before-cache. Here’s the sequence:

1. User starts on Location A.
2. User navigates to Location B (Snapshot A.1 is cached).
3. User presses "Back" to return to Location A.
4. Snapshot A.1 is shown as a preview.
5. Location B is snapshotted (Snapshot B.1 is cached).
6. Location A reloads and displays as A.2.
7. User clicks a link to the same Location A.
8. Snapshot A.1 is reused and shown as a preview.
9. Snapshot A.2 is cached.
10. Location A reloads and displays as A.3.

In this flow, Snapshot A.1 is displayed twice (steps 4 and 8) without firing turbo:before-cache before reuse, which can lead to invalid DOM state.

Proposed solution

I suggest that snapshots used as a preview are cloned before rendering the preview in the DOM. This will eliminate any issues if the same snapshot is used as a preview multiple times.