Logo Questions Linux Laravel Mysql Ubuntu Git Menu

How to access light DOM info from Javascript in Polymer


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?


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

Thanks in advance, Javier.

like image 930
Javier Vélez Avatar asked Dec 26 '22 10:12

Javier Vélez

1 Answers

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() {


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.

like image 122
Scott Miles Avatar answered Jan 09 '23 06:01

Scott Miles