title: Custom element not working, however not giving me an error
body: <p>I'm making a custom element for my website. I made 2 elements, the 2nd one works however the first one doesn't. Here are the 2 elements:</p>
  <pre class="lang-js prettyprint-override"><code>class Popup extends HTMLElement {
    connectedCallback() {
      this.dataset.rating = 1; /*document.querySelector(&quot;rating-inter&quot;).dataset.rating*/
      console.log(&quot;Debug: tenplate&quot;);
      this.template = `
      &lt;!-- Thank you state start --&gt;
      &lt;p class=&quot;typog&quot;&gt;
      You selected ${this.dataset.rating} out of 5
      &lt;/p&gt;
      &lt;h1&gt;
      Thank you!
      &lt;/h1&gt;
      &lt;p&gt;
      We appreciate you taking the time to give a rating. If you ever need more support,  don’t hesitate to get in touch!
  
      &lt;!-- Thank you state end --&gt;
      &lt;/p&gt;
      `
      this.ele = document.createElement(&quot;div&quot;)
      this.ele.innerHTML = this.ele
      this.appendChild(this.ele)
    }
  }
  
  class Rating extends HTMLElement {
    connectedCallback() {
      this.template = `
      &lt;div class=&quot;star&quot;&gt;
      &lt;img class=&quot;star&quot; src=&quot;images/icon-star.svg&quot; alt=&quot;Star&quot;&gt;
      &lt;/div&gt;
      &lt;!-- Rating state start --&gt;
      &lt;h1&gt;
      How did we do?
      &lt;/h1&gt;
      &lt;p class=&quot;typog&quot;&gt;
      Please let us know how we did with your support request. All feedback is appreciated
      to help us improve our offering!
      &lt;/p&gt;
      &lt;div class=&quot;btns&quot;&gt;
      &lt;button class=&quot;numbers&quot;&gt;1&lt;/button&gt; &lt;button class=&quot;numbers&quot;&gt;2&lt;/button&gt;
      &lt;button class=&quot;numbers&quot;&gt;3&lt;/button&gt; &lt;button class=&quot;numbers&quot;&gt;4&lt;/button&gt;
      &lt;button class=&quot;numbers&quot;&gt;5&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id=&quot;submit&quot;&gt;
      &lt;button id=&quot;submitBtn&quot;&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
      &lt;!-- Rating state end --&gt;
      `
      this.ele = document.createElement(&quot;div&quot;)
      this.ele.innerHTML = this.ele
      this.appendChild(this.ele)
      this.dataset.rating = null
    }
  }
  
  </code></pre>
  <p>The first one simply gives me a blank view, with no error message. I can't tell why this is happening. No console.log() inside of the connectedCallback work</p>