Content is displaying correctly, bind:innerHTML isn't tracking changes
The content of a div containing two {#each} blocks is bound to a variable via bind:innerHTML. These {#each} blocks are responsive to user input and dynamically render according to variable changes; this is already functional and the component itself displays changes correctly.
However, the variable (svgDivContentString) does not update as the contents of the component change. It simply retains the initial information from when the component was first mounted. No matter how the contents vary, it goes unchanged. Even if it's emptied manually via svgDivContentString = "", it just resets to the default info when the {#each} block triggers again (regardless of what's actually being displayed). The string is needed for conversion to base64 for use as an img.src.
<divbind:innerHTML={svgDivContentString}contenteditableid="kbContainer"><svg id="svgContainer" viewBox="0 0 {$width} {height}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> {#each allNotes as note, index (index)} ... {/each}Attempted solutions/workarounds
I tried emptying the string manually (as seen above) and ensuring that only new information was being introduced, but somehow the same default info ends up in the string every time. I have also tried going a "less Svelte" way and just using document.getElementById on the div, but that returns undefined. It's also "not very Svelte," which is often said in response to attempted JS workarounds for Svelte problems on SO posts.
Would like to reiterate that it is not a problem with the{#each}block. The rendered content is correctly updated every time. The problem is that bind:innerHTML isn't getting that memo for some reason.
Any guidance here or proposals for alternative means to the same end would be greatly appreciated.