Я изо всех сил пытаюсь заставить JQuery DatePicker работать в рамках пользовательского полимерного элемента. Кажется, он привязывается к телу, а не к самому элементу, например:

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

с определением:

Polymer('test-datepicker', {

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

... приводит к тому, что всплывающий календарь отображается в верхней части страницы, а не под входом, как это было бы в противном случае, как вы можете видеть в запущенном примере на jsbin:http://jsbin.com/saqojihi/1/

У меня есть похожие проблемы с подсказками начальной загрузки, которые не отображаются, если они перекрывают края веб-компонента, и я надеюсь, что эти два связаны.

Есть ли другой способ, которым я должен позвонить в DatePicker? Я пробовал прямые ссылки,$("#id").datepicker(), но, как говорится вдругой билетJQuery "не знает о ShadowDOM". Я также пытался использовать атрибут lightdom безрезультатно.

Я надеюсь, что кто-то имел успех с этим.

Изменить: 4/4/14

Спасибо @Scott Miles за предложение, я добавил следующее переопределениеJQuery.contains, но это, вероятно, все еще не идеальное решение:

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

Оно работает на данный момент, но я должен увидеть, как это закончится в более полном приложении.