title: datepicker as custom-calendar using native-web component
body: <p>I wanted to use native web in order to have custom calendar. I created js file and wrote some class that extends HTMLElement. Calendar pops up properly but the problem is that I can't choose a day in the calendar. When I try to  choose a date  It throws this  exception : &quot;Uncaught Missing instance data for this datepicker&quot;.</p>
  <p>My code looks like this :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;custom-calendar calendarName="from"&gt; &lt;/custom-calendar&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>please help me. How can I fix this ?</p>