How to access DOM information with Javascript in Polymer

Question

Question:

In the web component specification, when you want to read elements in Light-DOMfrom a template, you can use an element <content select></content>. But how to get this information from the javascript component code?

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 thisinside your prototype methods refers to the element itself. IOW, how could you do element.innerHTMLor element.firstChild, you can write this.innerHTMLor this.firstChild.

Simple mode:

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

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

, <content> Shadow DOM. getDistributedNodes api <content> node.

, , .

Answer 2

this, lightDOM this.shadowRoot shadowDOM

Answer 3

I don't know what the template displays in relation to dom, but maybe you can try the following:

//jQuery
$('wc-timer-title').text();

//Plain
document.getElementsByTagName("wc-timer-title")[0].innerHTML;

Answer 4

You can use /deep/, it is out of date, but there is no date when this will happen.