hero.js: midlertidige ?hero= brytere for å finne hva som forstyrrer hydreringen

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

hero.js

@@ -308,6 +308,7 @@ const CSS = `
 `;
 
 function ensureStyle() {
+    if (DEBUG.has('nostyle')) return;
     if (document.getElementById(STYLE_ID)) return;
     const style = document.createElement('style');
     style.id = STYLE_ID;
@@ -336,7 +337,7 @@ class WestraHero {
         this.hero = container.closest('.hero') || container.parentElement;
         // Where the module's custom properties go: an element the app
         // never hydrates, so writing to it cannot disturb hydration.
-        this.host = document.body;
+        this.host = DEBUG.has('nobody') ? document.createElement('div') : document.body;
         this.reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
         this.dark = window.matchMedia('(prefers-color-scheme: dark)');
 
@@ -357,7 +358,7 @@ class WestraHero {
         this.mark = mark;
         // Both inside the piece, and nothing outside it (see .westra-line).
         this.container = container;
-        container.append(this.canvas, this.name);
+        if (!DEBUG.has('nodom')) container.append(this.canvas, this.name);
 
         this.width = 0;
         this.height = 1;
@@ -601,6 +602,13 @@ class WestraHero {
     }
 }
 
+// Temporary, to find what disturbs hydration on the live site:
+// ?hero=off mounts nothing, ?hero=nostyle skips the stylesheet,
+// ?hero=nobody skips the custom properties on <body>, ?hero=nodom
+// adds nothing to the piece. Removed once known.
+const DEBUG = new Set((new URLSearchParams(location.search).get('hero') || '').split(','));
+
 export function mount(container) {
+    if (DEBUG.has('off')) return { stop() {} };
     return new WestraHero(container);
 }