title: Native JS for Reading HTML5 Custom Data Attributes
body: <p>I have learned that HTML5 includes a means to set custom attributes on elements using the data- prefix. However I'm a bit scewered in terms of how to read the properties during a javascript code block. I guess it is my interpretation of how the DOMStringMap is working thats off. </p>
  
  <p>Could someone simplify how to read the properties of the following sample html.</p>
  
  <pre><code>&lt;span data-complex-key="howtoRead" data-id="anId"&gt;inner&lt;/span&gt;
  </code></pre>
  
  <p>Trying following doesnt really work as expected</p>
  
  <pre><code>spanEl.dataset['id']                    // straight-forward and result is anId
  spanEl.dataset['complex-key']           // undefined
  spanEl.dataset['complex']['key']        // throws 'cannot read property of undefined'
  spanEl.getAttribute('complex-key')      // there's a null however,
  spanEl.getAttribute('data-complex-key') // this variant seems to work
  </code></pre>
  
  <p>Another thing that makes me wonder is, the CSS selectors seems to follow the excact same pattern as to which is i written in the DOM, so why is this not the case with reading from javascript.</p>
  
  <p>For instance, this would match</p>
  
  <pre><code> span[data-complex-key="howtoRead"] { color:green }
  </code></pre>
  
  <p>Appreciate the help, still getting more and more intreaged with the HTML5 Canvas, Video and  local Data Storage :)</p>