'Insert to web-page one instance of custom HTML element more than once
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/
P.S. I see, that is something wrong with web component, may be.
Solution 1:[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 :(.
Solution 2:[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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | ScienceKitten |
| Solution 2 | Danny '365CSI' Engelman |