Estoy luchando para que un jquery datepicker funcione dentro de un elemento de polímero personalizado. Parece unirse al cuerpo en lugar del elemento en sí, por ejemplo:

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

con la definición:

Polymer('test-datepicker', {

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

... resulta en el calendario emergente que se muestra en la parte superior de la página en lugar de debajo de la entrada como lo haría de otra manera, como puede ver en el ejemplo en ejecución en jsbin:http://jsbin.com/saqojihi/1/

Tengo problemas similares con la información sobre herramientas de bootstrap que no se muestra si se superponen a los bordes de un componente web, y espero que estos dos estén relacionados.

¿Hay alguna otra forma en que debería llamar al selector de fechas? He intentado referencias directas,$("#id").datepicker(), pero como dice enotro boleto, jquery "no sabe sobre ShadowDOM". También he intentado usar el atributo lightdom en vano.

Espero que alguien haya tenido éxito con esto.

Editar: 4/4/14

Gracias a @Scott Miles por la sugerencia, agregué la siguiente anulación deJQuery.contains, pero probablemente esta no sea la solución ideal:

$(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 );
  }
});

Funciona por ahora, pero tendré que ver cómo se desarrolla en una aplicación más completa.