多次向网页插入自定义 HTML 元素的一个实例

Question

As example, I dynamically create instance of some custom HTML element. After this, I twice use document.body.appendChild() and this work, but this should no be. What I may do for prevent this?

I put sample about this situation below in the text. RandomParagraphSizePlaceholder is simple web-component from some book. I use it only for illustration purposes.

https://jsfiddle.net/h6cxjae5/

PS I see, that is something wrong with web component, may be.

Answer 1

Only one instance of web component exists in web-page. But web component content is duplicated. May be, because it created in connectedCallback . I dont very famimiliar with web component:(.

Answer 2

You get two instances, because your code:

 this.appendChild(document.importNode(placeholder.content, true));

effectively makes a copy (importNode) and then appends another element.

connectedCallback (corretcly running twice) has (in this case) nothing to do with it.

https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode