title: Using Svelte, how do I populate a <style> tag in <svelte:head> with a Javascript string variable?
body: <p>Using Svelte, what I want to accomplish is being able to style my <code>html</code> using the <code>css</code> property of a <code>post</code> object I have. </p>
  
  <p>I thought, no problem, just add a style tag to my <code>svelte:head</code> with <code>{post.css}</code>. It will drop my <code>post.css</code> data right into the style tag, and viola’, problem solved. But, no, problem not solved. When I view the element in my browser, I see </p>
  
  <p><code>&lt;style&gt;{post.css}&lt;/style&gt;</code> </p>
  
  <p>instead of  </p>
  
  <pre><code>&lt;style&gt;
    p{
      color: purple;
      font-weight: 900;
    }
   &lt;/style&gt;
  </code></pre>
  
  <p>I have created a work around, where I set the <code>innerText</code> of the <code>&lt;style&gt;</code> tag after <code>onMount</code>, but I don’t like it, and would prefer to do it a cleaner way.</p>
  
  <p>What I want…</p>
  
  <pre><code>&lt;script&gt;
    export let post = {
      html: `&lt;p&gt;This is purple&lt;/p&gt;`,
      css : `
        p{
          color: purple;
          font-weight: 900;
        }
      `
      }  
  &lt;/script&gt;
  
  &lt;svelte:head&gt;
    &lt;style&gt;{post.css}&lt;/style&gt;
  &lt;/svelte:head&gt;
  
  {@html post.html}
  </code></pre>
  
  <p>What I have to do to make it work…</p>
  
  <pre><code>&lt;script&gt;
    import { onMount } from "svelte";
  
    export let post = {
      html: `&lt;p&gt;This is purple&lt;/p&gt;`,
      css : `
        p{
          color: purple;
          font-weight: 900;
        }
      `
      }
  
    onMount(() =&gt; {
      let styler = document.getElementById("styler");
      styler.innerText = post.css
    });
  &lt;/script&gt;
  
  &lt;svelte:head&gt;
    &lt;style id="styler"&gt;&lt;/style&gt;
  &lt;/svelte:head&gt;
  
  {@html post.html}
  </code></pre>
  
  <p>If you have any other alternatives to using the <code>css</code> property to style the <code>html</code> property of the <code>post</code> object, or know how to get Svelte to recognize <code>{post.css}</code> in a <code>&lt;style&gt;</code> tag, please let me know.</p>