What's the difference between this.$ and this.$$ in Polymer?

Question

I've read the documentation over and over and have googled with no luck. The docs start explaining this.$ with an example but then they don't give an example for what this.$$ does

As far as I understand it, this.$ will find something in my template with the ID I want. For example - I can use this.$.test.textContent="hey there"

But for this.$$ it just says "dynamically-created nodes" - maybe someone can explain with an example what the difference between static and dynamic created nodes is, and how to use this.$$ - Thank you in advance!

Answer 1

Polymer.dom(this.root).querySelector utilizes the shady DOM API.

Polymer with shady DOM (default in 1.0) doesn't fully polyfill shadow DOM.

To ensure all Polymer features, not natively supported by the browser, are taken into account correctly (like <content> projection) when using querySelector()) you need to use the Polymer.dom(...) wrapper.

• this.$ is a getter that returns a static map from element id to the element reference. Elements created by dom-repeat or hidden by dom-if or otherwise created dynamically are not included.

• this.$$() is a shorthand function for Polymer.dom(this.root).querySelector() and therefor takes dynamically created elements into account, because it actually queries the DOM when executed.