title: Why cant this Astro/Svelte component access the document element?
body: <pre><code>&lt;script lang=&quot;ts&quot;&gt;
    let theme = localStorage.getItem(&quot;theme&quot;) ?? &quot;light&quot;;
    const handleClick = () =&gt; {
      theme = (theme === &quot;light&quot; ? &quot;dark&quot; : &quot;light&quot;);    
      console.log('classlist',document.documentElement.classList);    
    };
    $:{
      if (theme === &quot;dark&quot;) {
        document!.documentElement.classList.add(&quot;dark&quot;);
      } else {
        document!.documentElement.classList.remove(&quot;dark&quot;);
      }
      localStorage.setItem(&quot;theme&quot;, theme);
    }
  &lt;/script&gt;
  
  &lt;button on:click={handleClick}&gt;{theme === &quot;light&quot; ? &quot;&quot; : &quot;&quot;}&lt;/button&gt;
  </code></pre>
  <p>when the button is clicked it prints the classlist fine, but I get document not defined when i add the reactive value.</p>
  <p>Thank you @H.B for the answer:</p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
    import { onMount } from &quot;svelte&quot;;
    let theme = localStorage.getItem(&quot;theme&quot;) ?? &quot;light&quot;;  
    let flag = false;
    onMount(()=&gt;{
      flag = true
    }) 
    $: if (flag) {
      if ( theme === 'dark') {
        document!.documentElement.classList.add(&quot;dark&quot;);
      } else {
        document!.documentElement.classList.remove(&quot;dark&quot;);
      }
      localStorage.setItem(&quot;theme&quot;, theme);
    }
    const handleClick = () =&gt; {
      theme = (theme === &quot;light&quot; ? &quot;dark&quot; : &quot;light&quot;);    
      console.log('classlist',document.documentElement.classList);    
    }; 
  &lt;/script&gt;
  
  &lt;button on:click={handleClick}&gt;{theme === &quot;light&quot; ? &quot;&quot; : &quot;&quot;}&lt;/button&gt;
  </code></pre>
  <p>this works as intended</p>