this.$ vs. this.shadowRoot.querySelector

[FluorescentHallucinogen]

• this.shadowRoot.querySelector is a native Shadow DOM API method, while this.$ is a Polymer API object.
• this.shadowRoot.querySelector can access nodes created dynamically using data binding (including those in dom-repeat and dom-if templates), while this.$ can't.

So why not to use this.shadowRoot.querySelector instead of this.$ always everywhere?

[FluorescentHallucinogen]

@azakus @ebidel PTAL.

[FluorescentHallucinogen]

@justinfagnani PTAL.

[arthurevans]

@FluorescentHallucinogen yes, this.$ is mostly included for backwards compatibility. But it's still supported in 2.x, because many people are used to it, and because the use case (accessing a static element in the shadow DOM by ID) is extremely common. I guess you could argue that this.$ is very slightly different than querySelector, because it's an object, not a method, and may theoretically be a touch faster than querying each time you access a given child.

And if you choose to use this.shadowRoot.querySelector or this.shadowRoot.getElementById instead of this.$, I don't think anyone could fault you for style.

For class-style elements, we explicitly recommend this.shadowRoot.querySelector over this.$$, which is not included in Polymer.Element.

[FluorescentHallucinogen]

@arthurevans Are there any plans to deprecate this.$ (move it to Polymer.LegacyElementMixin) in the next major Polymer version(s), as it was done with this.$$ in Polymer 2.0?

[jsilvermist]

@FluorescentHallucinogen That would be quite disappointing if so, as it is a very useful shortcut which allows you to not have to save a reference to every node in ready while still receiving the benefits of not having to repeatedly call querySelector.

[arthurevans]

Not changing any recommendations here, so closing.