How to access light DOM info from Javascript in Polymer

Question

Question:

In Web Components specification, when you want to read elements within a Light-DOM from the template the <content select></content> element can be used. But, how can this information be retrieved from the javascript code of the component?

Example:

<wc-timer>
    <wc-timer-title>I want to read this from JS</wc-timer-title>
</wc-timer>

Thanks in advance, Javier.

Answer 1

Remember that this inside of your prototype methods refers to the element itself. IOW, just like you could do element.innerHTML or element.firstChild you can write this.innerHTML or this.firstChild.

Simple mode:

domReady: function() {
  console.log(this.textContent);
}

http://jsbin.com/bociz/2/edit

This gets more complicated if you are using <content> to project nodes through multiple levels of Shadow DOM. In this case, you will need to use getDistributedNodes api of the <content> node itself.

Before getting into that, I suggest you start with the simple version, and ask a follow up question if you get into trouble.