Append a child element to the custom web component in the constructor function

I have defined a custom element in JS. I wanna initialize it in its constructor for example append a template element as its child. but as you know, the browser throws an error that says: Failed to construct 'CustomElement': The result must not have children that means I can't append any child element to the custom element in its constructor. I know that it can be solved if I create a shadow DOM, and then append elements to it, but I don't wanna use shadow DOM in every part of my app; and one another option is to append elements to the custom element in the connectedCallback method, whereas it's invoked every time that the custom element mounts to the DOM, and I think it's not such cool actually. How can I fix that problem without using shadow DOM and connectedCallback method? thanks the custom component: class ProductItem extends HTMLElement { constructor() { super() this.appendChild(template.cloneNode(true)) } } customElements.define('product-item', ProductItem) const template = document.createElement('article') template.innerHTML = ` Add ` export { ProductItem }