Como ejemplo, creo dinámicamente una instancia de algún elemento HTML personalizado. Después de esto, uso dos veces document.body.appendChild() y esto funciona, pero no debería ser así. ¿Qué puedo hacer para prevenir esto?
Pongo una muestra sobre esta situación a continuación en el texto. RandomParagraphSizePlaceholder es un componente web simple de algún libro. Lo uso solo con fines ilustrativos.
https://jsfiddle.net/h6cxjae5/
PD Ya veo, es posible que haya algún problema con el componente web.
Solo existe una instancia de componente web en la página web. Pero el contenido del componente web está duplicado. Puede ser, porque se creó en connectedCallback . No estoy muy familiarizado con el componente web :(.
Obtienes dos instancias, porque tu código:
this.appendChild(document.importNode(placeholder.content, true));efectivamente hace una copia (importNode) y luego agrega otro elemento.
connectedCallback (que se ejecuta correctamente dos veces) no tiene (en este caso) nada que ver con eso.
https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode