Can I use jquery within my custom Polymer elements?

Question

The Polymer documentation says:

Polymer provides a custom API for manipulating DOM such that local DOM and light DOM trees are properly maintained. These methods and properties have the same signatures as their standard DOM equivalents, except that properties and methods that return a list of nodes return an Array, not a NodeList.

Note: All DOM manipulation must use this API, as opposed to DOM API directly on nodes.

Jquery has a lot of useful methods though, which make my life easier, like toggleClass, hasClass, addClass, one...

I have been able to use some of these methods without consequence in my elements, but I am wondering what exactly the semantics are behind the bold part of the above quote, so I can reason about things more clearly.

Note: I'm not talking about using jquery in the main document, I am talking about using it when I am inside the shadow boundary, like in an element's ready callback for instance.

Answer 1

You can, actually. You'll just have to use Polymer.dom(this.root).querySelector and wrap that returned element in jquery.

Here's an example. http://jsbin.com/purudu/edit?html,output