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.

Olenta

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.

Emolument

Thanks @robdodson, this explanation makes a lot of sense. I had a hunch that Shadow DOM might be the source of the issues I was having. Guess this means encapsulation of jQuery plugins within a web component will not be an easy win. Thanks also for the jsbin example. Nice to see it work, though if the plugin needs to be injected as content, not sure there is much of an advantage to wrapping it in a web component, unless I am missing something. The very thing that is preventing it from working, scope encapsulation by way of Shadow DOM, is also the reason I was hoping to get it to work! – Olenta

I would also point anyone running into similar issues to this relevant thread. – Olenta

This lightdom example defeats the whole entire purpose of a web component being self contained and modular. – Wulfe

It depends on what the plugin does, but I would tend to agree. This is just an inherent problem when trying to combine something that was never designed or intended to be used with Web Components. Things will have to change. I imagine there are a ton of jQuery plugins that could be rewritten as Web Components. Yes it's a time investment, but it's worth it. – Emolument

@Emolument All your links like polymer-project.org/components/polymer/polymer.html is death ! – Chaparro