Can I use jquery within my custom Polymer elements?

javascript jquery dom polymer shadow-dom
Luke picture Luke · Sep 9, 2015 · Viewed 10.4k times · Source

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

Neil John Ramal picture Neil John Ramal · Sep 9, 2015

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

Related questions

Can I access the shadow DOM using jQuery?

I defined a component with polymer like this: <polymer-element name="my-component"> <template> <div id='test'>CONTENT</div> </template> </polymer-element> Now I want to access the shadow dom, for …

Read More
How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?

Read More
How can I select an element by name with jQuery?

Have a table column I'm trying to expand and hide: jQuery seems to hide the td elements when I select it by class but not by element's name. For example, why does: $(".bold").hide(); // selecting by class works $("tcol1").hide(); // …

Read More