Access html inside content tag in Polymer

Question

I am trying to access the html that i wrote inside my own polymer-element but it isn't working. How can I achieve this?

index.html

<my-element> content I am trying to access </my-element>

my-element.html

<polymer-element name='my-element'>
    <template>
        <content id='content'></content>
    </template>
    <script>
        Polymer({
            ready: function(){
                console.log('html: '+this.$.content.innerHTML);
            }
        });
    </script>
</polymer-element>

console

html:

Answer 1

Unfortunately, the implementation inserts content nodes as siblings of content, not as nested nodes. That said, after everything is ready, the structure of document would look like:

<content id='content'></content>
content I am trying to access

not as you probably were expecting:

<!-- THAT IS NOT HOW IT’S COMPOSED -->
<content id='content'>content I am trying to access</content>

Fortunately, you are still having an access to childNodes within template context:

  Polymer({
      domReady: function() {
        var content = '';
        this.childNodes.array().forEach( function(el) {
          content += el.textContent; // do whatever you want here
        });
        console.log(content);
      }
  });

  //⇒ content I am trying to access 

Hope it helps.