title: Best practice for embedding arbitrary JSON in the DOM?
body: <p>I'm thinking about embedding arbitrary JSON in the DOM like this:</p>
  
  <pre><code>&lt;script type="application/json" id="stuff"&gt;
      {
          "unicorns": "awesome",
          "abc": [1, 2, 3]
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is similar to the way one might store an arbitrary HTML template in the DOM for later use with a JavaScript template engine. In this case, we could later retrieve the JSON and parse it with:</p>
  
  <pre><code>var stuff = JSON.parse(document.getElementById('stuff').innerHTML);
  </code></pre>
  
  <p><a href="http://jsbin.com/epodeh/edit#javascript,html">This works</a>, but is it the best way? Does this violate any best practice or standard?</p>
  
  <p><i>Note: I'm not looking for alternatives to storing JSON in the DOM, I've already decided that's the best solution for the particular problem I'm having. I'm just looking for the best way to do it.</i></p>