Search code examples
javascriptweb-component

Why its need to clone the content of template in web components

Almost in all examples that use templates as the web-component inner, they clone the content of the template before appending it to shadowDOM. like this

this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(tmp.content.cloneNode(true));

My question is why do you need to do this? What problems are likely to run into if I append this content without cloning?

Solution

  • If you don't clone the content, you are moving the content out of the template and you can't use the template anymore as it's now empty. If you clone it first you are moving the clone and the template remains intact.