Search code examples
htmlpolymerweb-componenthtml5-template

How to access innerHTML of a template in the content of an element

First off, I apologize for the title-gore. I struggled to summarize this issue in a single sentence.

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.

(Please note that the intent here is to create an element similar to the demo-snippet of iron-demo-helpers.)

Consider the following Polymer element:

<link rel="import" href="../../polymer/polymer.html">
<dom-module id="print-contents-html">
  <script>
    Polymer({
      is: 'print-contents-html',

      attached: function() {
        var template = Polymer.dom(this).queryDistributedElements('template')[0];
        console.log(template.innerHTML);
      }
    });
  </script>
</dom-module>

Very simply, I query for the 'template' element and log its inner HTML.

Now consider the following usage:

<!doctype html>
<html>
  <head>
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="./print-contents-html.html">
  </head>
  <body>
    <print-contents-html>
      <template>
        Hello World
      </template>
    </print-contents-html>
  </body>
</html>

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:

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="./print-contents-html.html">

<dom-module id="simple-demo">
  <template>
    <print-contents-html>
      <template>
        Hello World from simple demo
      </template>
    </print-contents-html>
  </template>
  <script>
    Polymer({
      is: 'simple-demo',
    });
  </script>
</dom-module>

Now if I update the usage to also include an instance of the simple-demo element:

<!doctype html>
<html>
  <head>
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="./print-contents-html.html">
    <link rel="import" href="./simple-demo.html">
  </head>
  <body>
    <print-contents-html>
      <template>
        Hello World
      </template>
    </print-contents-html>

    <simple-demo></simple-demo>
  </body>
</html>

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.

It appears that while the queryDistributedElements() does return the instance of the template element, the innerHTML field is an empty string.

Does anyone know why this is the case? That accessing the content/child template element does not have its innerHTML set?

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?

Kind Regards, Andrew Butler

Solution

  • This issue is discussed in Polymer's Github repository.

    The solution is to add a preserve-content attribute it the inner <template> tag:

    <dom-module id="simple-demo">
  <template>
    <print-contents-html>
      <template preserve-content>
        Hello World from simple demo
      </template>
    </print-contents-html>
  </template>
  ...

    Then it works!