Binding JQueryUI DatePicker within a Polymer Web Component

Question

I am struggling to get a jquery datepicker to work within a custom polymer element. It seems to bind to the body instead of the element itself, for example:

Answer 1

In this particular case, the problem boils down to the notion of what document.contains returns wrt elements in ShadowDOM (https://www.w3.org/Bugs/Public/show_bug.cgi?id=22141).

The datepicker positioning code is written to ignore elements not contained by document. The is currently not considered contained, so the positioning code aborts.

I was able to hack a solution by simply stubbing out JQuery's contains code like this:

$(function() {
  jQuery.contains = function() {
    return true;
  };
 });

This is clearly a workaround (bad) solution, but it makes the JsBin work for now.

http://jsbin.com/saqojihi/8/edit