-
-
Notifications
You must be signed in to change notification settings - Fork 111
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Only last element renders when reusing #401
Comments
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>`);
} |
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. |
That makes sense, though my intention of keeping the content out of the function was for clarity, instead of optimization. Thanks for clarifying! |
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>`);
} |
Appreciate the suggestion, though we went with |
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 👋 |
I maybe misunderstanding how hyperHTML works, but in the first case of the example below, only the last usage of
icon
is rendered. Does hyperHTML move the elements into the DOM instead of cloning them?See minimal reproduction: https://codepen.io/sidvishnoi/pen/VwaqwzM
The text was updated successfully, but these errors were encountered: