title: Render HTML Tag attribute using mustache
body: <p>In my mustache template I do have something like:</p>
  
  <pre><code>&lt;div {{attr}}="{{attrVal}}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Rendering this using </p>
  
  <pre><code>Mustache.render(template, {attr : 'data-test', attrVal : 'test'})
  </code></pre>
  
  <p>does produce</p>
  
  <pre><code>&lt;div ="test"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I expect to get something like</p>
  
  <pre><code>&lt;div data-test="test"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Isn't it possible to render attribute name inside of a tag using Mustache? </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I figured out the problem. I define my HTML Mustache Templates inside custom <code>&lt;template&gt;</code> tags in my document. For example:</p>
  
  <pre><code>&lt;template id='myTemplate'&gt;
      &lt;div {{dataAttr}}="{{dataAttrValue}}"&gt;&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>When getting the template using <code>document.querySelector("#myTemplate").innerHTML</code> the browser does convert the <code>{{dataAttr}}</code> to <code>{{dataattr}}</code> because attributes are case insensitiv. So calling</p>
  
  <pre><code>Mustache.render(
      document.querySelector("#myTemplate").innerHTML, 
      { dataAttr : 'data-attr', dataAttrValue : 'test'}
  );
  </code></pre>
  
  <p>Results in </p>
  
  <pre><code>&lt;div ="test"&gt;&lt;/div&gt;
  </code></pre>