title: dynamically edit template of iron-list
body: <p>At first, i know, there are many questions about iron-list. But mostly about editing items and not whole template inside iron-list.. </p>
  
  <p>My code is really extremely complicated and posting it is pointless. I am working on data-tables which are using <code>iron-list</code>. I have element called <code>diamond-listing</code> and inside this <code>diamond-listing</code> i have <code>iron-list</code>. </p>
  
  <p><strong>You can image this like</strong>: Parent element define <code>&lt;template&gt;</code> with some content inside it, and child element (diamond-listing) will render this template as a table</p>
  
  <p>Of course <code>diamond-listing</code> is used multiple times in my application and always with different template. For example: page users have columns with userID, userName etc.. and on page stations there are columns stationID, address etc.. with different number of columns. Every pagea has it's own <code>&lt;template&gt;</code> which i am trying to propagate to <code>diamond-listing</code>. For example:</p>
  
  <pre><code>    &lt;diamond-listing as="user" id="permissionsTable" type="pagination" pagination-items-per-page="6" header-data="{{headerData}}" address="/user/" loading="{{loading}}"&gt;
          &lt;div id="test" slot="content"&gt;
              &lt;template&gt;
                  &lt;div class="diamond-row" on-tap="_openUrl" info$="/user/[[user.id]]"&gt;
                      &lt;diamond-item text="{{user.username}}"&gt;&lt;/diamond-item&gt;
                      &lt;diamond-item text="{{user.partner.name}}"&gt;&lt;/diamond-item&gt;
                  &lt;/div&gt;
              &lt;/template&gt;
          &lt;/div&gt;
      &lt;/diamond-listing&gt;
  </code></pre>
  
  <p>What i managed to do is to make it work in shadow dom using <code>&lt;slot&gt;</code> and simply rewrite <code>&lt;template&gt;</code> inside <code>&lt;iron-list&gt;</code>, but here we are.. For example using Firefox, which doesn't support webcomponents, there isn't <code>&lt;template&gt;</code> as a child of <code>&lt;iron-list&gt;</code> (because there is no shadow-dom) so there is no way how to update <code>&lt;template&gt;</code> and render iron-list.</p>
  
  <p><strong>What i tried:</strong></p>
  
  <p>1) Find template inside iron-list and use <code>removeChild</code> and <code>appendChild</code> functions.</p>
  
  <pre><code>var test = this.querySelector("#test template");
  this.$$("#diamondList").removeChild(this.$$("#diamondList template"));
  this.$$("#diamondList").appendChild(test);
  </code></pre>
  
  <p>Without success.</p>
  
  <p>2) Define in HTML empty iron-list without any template inside it. And then in javascript add template dynamically. Without success. ( iron-list is crying it requires template)</p>
  
  <p>3) Create dynamically iron-list using <code>document.createElement</code> </p>
  
  <pre><code>var test = this.querySelector("#test template");
  var list = document.createElement("iron-list");
  list.appendChild(test);
  list.as = this.as;
  list.items = [{"username":"test","partner":{"name":"Test partner","id":1}}];
  list.id = "diamondList";
  </code></pre>
  
  <p>result: same as 2) ... </p>
  
  <p>Is there a way, how to update <code>template</code> which is used to render all items in <code>iron-list</code>? </p>
  
  <p>Or create iron-list with defined template inside JS ? </p>
  
  <p>Or somehow do it with dom-repeat ? I won't have more than 10 items in listing, since it's fully pagination listing. ( this is propably simplest solution, but i don't know how to render <code>&lt;template&gt;</code> for every iteration</p>