Пользовательский элемент с shadow DOM, не получается пересоздавать элемент

class MyElement extends HTMLElement {
                constructor() {
                    super();
                }
 
                render() {
                    let html = document.importNode(myWebCompTemplate.content, true);
                    let Test = document.querySelector(".popup-button")
                    let delTest = document.querySelector(".test")
                    this.attachShadow({ mode: 'open' })
                    this.shadowRoot.appendChild(html);
                    let colorNew = {
                        name: this.getAttribute('name') || undefined,
                        type: this.getAttribute('type') || undefined,
                        color: this.getAttribute('color') || undefined
                    }
                    // this.shadowRoot.querySelector('.name').textContent = this.getAttribute('name')
                    // this.shadowRoot.querySelector('.type').textContent = this.getAttribute('type')
                    // this.shadowRoot.querySelector('.color').textContent = this.getAttribute('color')
                    delTest.addEventListener("click", function (t) {
                        let pars = document.querySelectorAll('my-webcomp')
                        console.log(pars[pars.length - 1])
                        pars[pars.length - 1].remove()
                    })
                    Test.addEventListener("click", function (e) {
                        let nod = document.createElement('my-webcomp')
                        let parent = document.body.appendChild(nod)
                        parent.shadowRoot.querySelector('#type').textContent = document.querySelector('#typeId').value
                        parent.shadowRoot.querySelector('.name').textContent = document.querySelector('#nameInp').value
                    })
                }
 
                connectedCallback() {
                    if (!this.rendered) {
                        this.render();
                        this.rendered = true;
                    }
                }
 
                disconnectedCallback() {
 
                }
 
                static get observedAttributes() {
                    return ['name', 'type', 'color'];
                }
 
                attributeChangedCallback(name, oldValue, newValue) {
                    this.render()
                }
            }
            customElements.define("my-webcomp", MyElement);

class MyElement extends HTMLElement {
    /* ... */
}
 
let Test = document.querySelector(".popup-button")
let delTest = document.querySelector(".test")
delTest.addEventListener("click", function (t) {
    let pars = document.querySelectorAll('my-webcomp')
    console.log(pars[pars.length - 1])
    pars[pars.length - 1].remove()
})
Test.addEventListener("click", function (e) {
    let nod = document.createElement('my-webcomp')
    let parent = document.body.appendChild(nod)
    parent.shadowRoot.querySelector('#type').textContent = document.querySelector('#typeId').value
    parent.shadowRoot.querySelector('.name').textContent = document.querySelector('#nameInp').value
})