Menu
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.
844
A jQuery plugin is simply a new method that we use to extend jQuery's prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you add. As established, whenever you call jQuery() you're creating a new jQuery object, with all of jQuery's methods inherited.
Polymer adds a set of features to the basic custom element: Instance methods to handle common tasks. Automation for handling properties and attributes, such as setting a property based on the corresponding attribute. Creating shadow DOM trees for element instances based on a supplied template.
Polymer is a lightweight library built on top of the web standards-based Web Components APIs, and makes it easier to build your very own custom HTML elements. Creating reusable custom elements - and using elements built by others - can make building complex web applications easier and more efficient.
Polymer. js facilitates you to create your own custom elements easily using the HTML, CSS, and JavaScript for adding interactions to the element. Polymer. js is created by Google and provides cross-browser compatible applications along with the web components.
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.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
