jQuery plugins and Polymer elements

Question

I have attempted to wrap a couple of jQuery plugins in Polymer elements, but have so far had little success. For example the select2 plugin (troubles discussed here) and the DataTables plugin found here. Although it would be great to not have jQuery dependencies, the landscape for ready to use jQuery plugins is really mature and until the web components libraries catch up, it would be nice to have wrappers that bring all of the goodness of web components to the deep library of jQuery plugins.

My question is are there any key gotchas when working with jQuery within a Polymer element that need to be considered? And even more useful, are there good examples of successful Polymer elements that wrap jQuery plugins? My searching for such examples have so far uncovered very little.

Answer 1

My question is are there any key gotchas when working with jQuery within a Polymer element that need to be considered?

Probably the biggest issue is going to be around Shadow DOM. When you place markup inside of the Shadow DOM it cannot be selected by jQuery. Many plugins assume that all of their content is available in the Light DOM so that can lead to all kinds of problems. Hopefully newer versions of jQuery will find ways to work with the Shadow DOM so this might become less of an issue.

And even more useful, are there good examples of successful Polymer elements that wrap jQuery plugins?

If you really want to work with a jQuery plugin and Polymer elements then it might be best to construct your jQuery plugins in the Light DOM and then pass them into your elements as <content>. Here's a jsbin example which constructs a Select2 element and passes it into a Polymer element so it can be displayed.