Пытаюсь создать кнопку, которая будет добавлять пользовательский элемент. В него должны будут вписываться пользовательские данные, но каждый раз при нажатии на эту кнопку, количество элементов умножается на 2. То есть сначала появляется 1, потом 2, 4, 8 и так далее. Никак не могу понять в чем проблема.
class MyElement extends HTMLElement {
constructor() {
super();
}
render() {
let html = document.importNode(myWebCompTemplate.content, true);
let Test = document.querySelector("#typeId")
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')
Test.addEventListener("click", function (e) {
let nod = document.createElement('my-webcomp')
let parent = document.body.appendChild(nod)
parent.shadowRoot.querySelector('#type').textContent = this.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);
<template id="myWebCompTemplate">
<p class="name"></p>
<p id='type'
class="type"></p>
<p class="color"></p>
</template>
<my-webcomp name="Серый хомяк"
type="main"
color="#3f3f3f"
id="myWebComp">
</my-webcomp>
Простой
