--- title: "Preserving DOM Changes Across Live Reloads" url: https://daily.dev/posts/preserving-dom-changes-across-live-reloads-qeonq9k9p source_url: https://kittygiraudel.com/2026/05/01/preserving-dom-changes-across-live-reloads type: article source: "Kitty says hi." author: "Kitty Giraudel" published: 2026-05-01T08:43:23.313Z updated: 2026-05-02T05:00:21.402Z tags: ["webdev", "javascript"] reading_time: 6 upvotes: 6 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Preserving DOM Changes Across Live Reloads **[Kitty says hi.](https://daily.dev/sources/kittygiraudel)** · [@kittygiraudel](https://daily.dev/kittygiraudel) · 6 min read · 6 upvotes · 0 comments ## Summary When Eleventy's live reload uses morphdom to diff and patch the DOM, client-side JavaScript changes (like a data-theme attribute set by a theme switcher) get wiped out. The fix is a MutationObserver that watches the affected attribute and re-applies it whenever morphdom removes it. A more generic approach — re-firing DOMContentLoaded synthetically — was explored but rejected because the event isn't designed to fire multiple times, it causes duplicate event listeners, and synthetic events have isTrusted: false. The targeted observer solution, scoped to development only via a Liquid template conditional, is the recommended approach. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Better world by better software](https://daily.dev/posts/better-world-by-better-software-h1ajuzlat) · Gleb Bahmutov · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript) [View this post on daily.dev](https://daily.dev/posts/preserving-dom-changes-across-live-reloads-qeonq9k9p)