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:

class Popup extends HTMLElement {
  connectedCallback() {
    this.dataset.rating = 1; /*document.querySelector("rating-inter").dataset.rating*/
    console.log("Debug: tenplate");
    this.template = `
    <!-- Thank you state start -->
    <p class="typog">
    You selected ${this.dataset.rating} out of 5
    </p>
    <h1>
    Thank you!
    </h1>
    <p>
    We appreciate you taking the time to give a rating. If you ever need more support,  don’t hesitate to get in touch!

    <!-- Thank you state end -->
    </p>
    `
    this.ele = document.createElement("div")
    this.ele.innerHTML = this.ele
    this.appendChild(this.ele)
  }
}

class Rating extends HTMLElement {
  connectedCallback() {
    this.template = `
    <div class="star">
    <img class="star" src="images/icon-star.svg" alt="Star">
    </div>
    <!-- Rating state start -->
    <h1>
    How did we do?
    </h1>
    <p class="typog">
    Please let us know how we did with your support request. All feedback is appreciated
    to help us improve our offering!
    </p>
    <div class="btns">
    <button class="numbers">1</button> <button class="numbers">2</button>
    <button class="numbers">3</button> <button class="numbers">4</button>
    <button class="numbers">5</button>
    </div>
    <div id="submit">
    <button id="submitBtn">Submit</button>
    </div>
    <!-- Rating state end -->
    `
    this.ele = document.createElement("div")
    this.ele.innerHTML = this.ele
    this.appendChild(this.ele)
    this.dataset.rating = null
  }
}

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