使用本机 Web 组件将日期选择器作为自定义日历

Question

我想使用本机Web来拥有自定义日历。我创建了JS文件，并编写了一些扩展HTMlelement的类。日历正确弹出，但问题是我无法在日历中选择一天。当我尝试选择一个日期时，它会引发此异常：“此datepicker的丢失实例数据”。

我的代码看起来像这样：

class CustomCalendar extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});

    const wrapper = document.createElement('div');

    wrapper.setAttribute('class', 'wrapper');

    const calendarInputLabel = wrapper.appendChild(document.createElement('label'));
    calendarInputLabel.setAttribute('class', 'date-label');

    const iconImg = calendarInputLabel.appendChild(document.createElement('img'));
    iconImg.setAttribute('class', 'calendarIcon');
    iconImg.src = this.hasAttribute('iconImgSrc') ? this.getAttribute('iconImgSrc') : 'api/theme/img/icons-calendar.png';

    const calendarInput = calendarInputLabel.appendChild(document.createElement('input'));
    calendarInput.setAttribute('type', 'text');
    calendarInput.setAttribute('id', this.getAttribute('calendarName'));




    shadowRoot.append(wrapper);


  }
  connectedCallback() {
      $(this.shadowRoot.getElementById('from')).datepicker({
        dateFormat: "dd-mm-yy"
        ,   duration: "fast"
      });




  }


}


customElements.define('custom-calendar', CustomCalendar);

<custom-calendar calendarName="from"> </custom-calendar>

请帮我。我该如何解决？