title: Binding JQueryUI DatePicker within a Polymer Web Component
body: <p>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:</p>
  
  <pre><code>&lt;polymer-element
    name="test-datepicker"&gt;
    &lt;template&gt;
        &lt;p&gt;Date: &lt;input type="text" id="dp"&gt;&lt;/p&gt;
    &lt;/template&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>with the definition:</p>
  
  <pre><code>Polymer('test-datepicker', {
  
      ready: function() {
          $(this.$.dp).datepicker();
      },
  });
  </code></pre>
  
  <p>... results in the pop-up calendar displaying at the top of the page instead of under the input as it would otherwise, as you can see in the running example over at jsbin: <a href="http://jsbin.com/saqojihi/1/" rel="nofollow noreferrer">http://jsbin.com/saqojihi/1/</a></p>
  
  <p>I'm having similar issues with bootstrap tooltips not displaying if they overlap the edges of a web component, and I'm hoping these two are related.</p>
  
  <p>Is there another way that I should be calling the datepicker? I've tried direct references, <code>$("#id").datepicker()</code>, but as it says in <a href="https://stackoverflow.com/questions/18351618/bootstrap-js-not-working-in-polymer-components">another ticket</a>, jquery "doesn't know about ShadowDOM". I've also tried using the lightdom attribute to no avail.</p>
  
  <p>I'm hoping someone has had success with this.</p>
  
  <p><strong>Edit: 4/4/14</strong></p>
  
  <p>Thanks to @Scott Miles for the suggestion, I've added the following override of <code>JQuery.contains</code>, but this probably still isn't the ideal solution:</p>
  
  <pre><code>$(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 );
    }
  });
  </code></pre>
  
  <p><a href="http://jsbin.com/saqojihi/10" rel="nofollow noreferrer">It works</a> for now, but I'll have to see how it plays out in a more complete app.</p>