title: How to access innerHTML of a template in the content of an element
body: <p>First off, I apologize for the title-gore. I struggled to summarize this issue in a single sentence.</p>
  
  <p>I have a Polymer element. In my element, I wish to display (or simply log to console) the innerHTML of a template element that is a child of (contents of) the element instance.</p>
  
  <p>(Please note that the intent here is to create an element similar to the demo-snippet of iron-demo-helpers.)</p>
  
  <p>Consider the following Polymer element:</p>
  
  <pre><code>&lt;link rel="import" href="../../polymer/polymer.html"&gt;
  &lt;dom-module id="print-contents-html"&gt;
    &lt;script&gt;
      Polymer({
        is: 'print-contents-html',
  
        attached: function() {
          var template = Polymer.dom(this).queryDistributedElements('template')[0];
          console.log(template.innerHTML);
        }
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>Very simply, I query for the 'template' element and log its inner HTML.</p>
  
  <p>Now consider the following usage:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="../../webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
      &lt;link rel="import" href="./print-contents-html.html"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;print-contents-html&gt;
        &lt;template&gt;
          Hello World
        &lt;/template&gt;
      &lt;/print-contents-html&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As expected, this results in "Hello World" being logged to the console.
  However, I am trying to make use of the 'print-contents-html' element within another Polymer element:</p>
  
  <pre><code>&lt;link rel="import" href="../../polymer/polymer.html"&gt;
  &lt;link rel="import" href="./print-contents-html.html"&gt;
  
  &lt;dom-module id="simple-demo"&gt;
    &lt;template&gt;
      &lt;print-contents-html&gt;
        &lt;template&gt;
          Hello World from simple demo
        &lt;/template&gt;
      &lt;/print-contents-html&gt;
    &lt;/template&gt;
    &lt;script&gt;
      Polymer({
        is: 'simple-demo',
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>Now if I update the usage to also include an instance of the simple-demo element:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="../../webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
      &lt;link rel="import" href="./print-contents-html.html"&gt;
      &lt;link rel="import" href="./simple-demo.html"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;print-contents-html&gt;
        &lt;template&gt;
          Hello World
        &lt;/template&gt;
      &lt;/print-contents-html&gt;
  
      &lt;simple-demo&gt;&lt;/simple-demo&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would expect to see both "Hello World" and "Hello World from simple demo" logged to the console. However the simple demo message is not logged.</p>
  
  <p>It appears that while the queryDistributedElements() does return the instance of the template element, the innerHTML field is an empty string.</p>
  
  <p>Does anyone know why this is the case? That accessing the content/child template element does not have its innerHTML set?</p>
  
  <p>Secondly, does anyone know of an alternative method through which I can access the innerHTML of the template element that is a content/child of a polymer element?</p>
  
  <p>Kind Regards,
  Andrew Butler</p>