javascript - What's the difference between this.$ and this.$$ in Polymer? - Stack Overflow

admin管理员组

文章数量:1277899

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!

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!

• javascript
• html
• polymer

Share Improve this question Follow asked Feb 1, 2017 at 1:15 Bobby BattistaBobby Battista 2,07533 gold badges2020 silver badges2727 bronze badges 4

• The page you linked to states: For locating dynamically-created nodes in your element's local DOM, the $$ method provides a shorthand for Polymer.dom(this.root).querySelector(): this.$$(selector) – user5734311 Commented Feb 1, 2017 at 1:17
• Yes that's the sentence I was referring to in the question - I just don't know what olymer.dom(this.root).querySelector() does, so I don't know what this.$$(selector) does. And there's no example or explanation. – Bobby Battista Commented Feb 1, 2017 at 4:23
• That's because it is assumed that people know what JavaScript's document.querySelector() does: it selects the first element matching the selector, where selector is a String formatted like the one for a CSS rule. this.$$("ul li") will grab the first <li> in the first <ul>. – user5734311 Commented Feb 1, 2017 at 10:05
• very helpful question, thank you – swyx Commented Mar 13, 2018 at 19:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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.

本文标签： javascriptWhat39s the difference between this and this in PolymerStack Overflow