Estoy creando un elemento personalizado para mi sitio web. Hice 2 elementos, el segundo funciona, pero el primero no. Aquí están los 2 elementos:

 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 } }

El primero simplemente me da una vista en blanco, sin mensaje de error. No puedo decir por qué sucede esto. No hay console.log() dentro del trabajo connectedCallback