title: Setting an id on an element created from a template element
body: <p>I have a template element that I use to create <code>&lt;li&gt;</code>-Elements on my page. I can set the textContent attributes of the inner elements of that template. However I can not set the id for the parent element inside the template.</p>
  
  <pre><code>&lt;template id="list-item"&gt;
    &lt;li class="list-group-item"&gt;
      &lt;div class="media-body"&gt;
        &lt;strong class="list-item-text"&gt;&lt;/strong&gt;
        &lt;p class="list-item-text"&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/template&gt;
  
  &lt;div id="output"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And this is the required js to demonstrate the issue.</p>
  
  <pre><code>var template = document.querySelector('#list-item');
  var listItem = document.importNode(template.content, true);
  var lines = listItem.querySelectorAll('.list-item-text');
  
  lines[0].textContent = 'title';
  lines[1].textContent = 'description';
  listItem.id = 5;
  
  document.querySelector('#output').appendChild(listItem);
  </code></pre>
  
  <p>Text contents will be set correctly, however the id won't be set at all (the js attribute gets created but it does not appear in the DOM.</p>
  
  <p>I also created a <a href="https://jsfiddle.net/53t88z78/">jsfiddle</a> for this.</p>
  
  <p>How can I set the id of the newly appended element? My current approach is to avoid templates in general and use strings in order to construct the element, which makes me feel dirty.</p>