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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With