Only last element renders when reusing about hyperhtml

[WebReflection]

Actually ... wait a minute ... yes, hyperHTML optimize the hell out of everything, never cache content if you want to use it in multiple places ... it's also not necessary, nor faster, it's just error prone, due referenced content/nods that are of course moved around when cached, that's the point of caching.

Either wire content with different IDs, or simply create a new element within each loop, as you want a different element within each loop.

[WebReflection]

free to do whatever you prefer, but the whole point of this library is that you don't need to use DOM APIs ... it's better to understand how these work, imho 👋

[WebReflection]

have you tried to use wire?

const icon = hyperHTML.wire()`<em>🚫</em>`;
for (const num of [1, "2", "3 only last SVG is rendered"]) {
  const contents = [];
  contents.push(hyperHTML.wire()`<span>${icon} ${num}</span>`);
  // ... 
  document.getElementById("main1").append(hyperHTML`<h2>${contents}</h2>`);
}

[sidvishnoi]

That makes sense, though my intention of keeping the content out of the function was for clarity, instead of optimization. Thanks for clarifying!

[WebReflection]

if that's the intent, make it arrow?

const icon = () => hyperHTML`<em>🚫</em>`;
for (const num of [1, "2", "3 only last SVG is rendered"]) {
  const contents = [];
  contents.push(hyperHTML`<span>${icon()} ${num}</span>`);
  // ... 
  document.getElementById("main1").append(hyperHTML`<h2>${contents}</h2>`);
}

[sidvishnoi]

Appreciate the suggestion, though we went with cloneNode() instead.