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.
Table of contents
About the theme switcher §About live reloading §About Eleventy’s watch mode §The problem §The A solution §A (failed) generic solution §Wrapping up §Sort: