JQueryUI DatePicker innerhalb einer Polymer-Webkomponente binden

Ich habe Mühe, einen JQuery Datepicker für ein benutzerdefiniertes Polymerelement zu finden. Es scheint sich an den Körper anstatt an das Element selbst zu binden, zum Beispiel:

<polymer-element
  name="test-datepicker">
  <template>
      <p>Date: <input type="text" id="dp"></p>
  </template>
</polymer-element>

mit der Definition:

Polymer('test-datepicker', {

    ready: function() {
        $(this.$.dp).datepicker();
    },
});

... führt dazu, dass der Popup-Kalender oben auf der Seite und nicht wie sonst unter der Eingabe angezeigt wird, wie Sie im folgenden Beispiel bei jsbin sehen können:http://jsbin.com/saqojihi/1/

Ich habe ähnliche Probleme mit Bootstrap-QuickInfos, die nicht angezeigt werden, wenn sie sich mit den Rändern einer Webkomponente überschneiden, und ich hoffe, dass diese beiden Probleme zusammenhängen.

Gibt es eine andere Möglichkeit, den Datepicker anzurufen? Ich habe versucht, direkte Referenzen,$("#id").datepicker(), aber wie es heißtein anderes Ticketjquery "kennt sich mit ShadowDOM nicht aus". Ich habe auch versucht, das Lightdom-Attribut ohne Erfolg zu verwenden.

Ich hoffe, jemand hat damit Erfolg gehabt.

Bearbeiten: 04.04.14

Dank an @Scott Miles für den Vorschlag, habe ich die folgende Außerkraftsetzung von hinzugefügtJQuery.contains, aber das ist wahrscheinlich immer noch nicht die ideale Lösung:

$(function(){
  // Store a reference to the original contains method.
  var originalContains = jQuery.contains;
  jQuery.contains = function(parent, child){
      var re = /datepicker|dp/i;
      if(child.className.match(re)) {
        return true;
      }
      // Execute the original method.
      return originalContains.apply( this, arguments );
  }
});

Es klappt für den Moment, aber ich werde sehen müssen, wie es in einer vollständigeren App abläuft.