Estou tendo dificuldades para fazer com que um datepicker jquery funcione dentro de um elemento de polímero personalizado. Parece ligar-se ao corpo em vez do próprio elemento, por exemplo:

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

com a definição:

Polymer('test-datepicker', {

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

... resulta no calendário pop-up exibido na parte superior da página em vez de sob a entrada, como seria de outra forma, como você pode ver no exemplo em execução em jsbin:http://jsbin.com/saqojihi/1/

Estou tendo problemas semelhantes com as dicas de ferramentas de autoinicialização que não são exibidas se elas se sobrepõem às bordas de um componente da web, e espero que essas duas estejam relacionadas.

Existe outra maneira de eu chamar o datepicker? Eu tentei referências diretas,$("#id").datepicker(), mas como dizoutro ingresso, jquery "não conhece o ShadowDOM". Eu também tentei usar o atributo lightdom sem sucesso.

Espero que alguém tenha tido sucesso com isso.

Editar: 4/4/14

Obrigado a @Scott Miles pela sugestão, adicionamos a seguinte substituição deJQuery.contains, mas essa provavelmente ainda não é a solução 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 enquanto, mas vou ter que ver como ele funciona em um aplicativo mais completo.