Allow textContent / innerHTML / innerText binding without setting the contenteditable attribute

[Serator]

Describe the problem

Svelte already allows you to create read-only bindings (e.g. <svelte:window bind:innerWidth />).
But in the case of element content binding, the contenteditable attribute is required. Otherwise we get an error:

'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings

Svelte 5 (runes) example

But this can be easily hacked by adding contenteditable="false".

Svelte 4 example (there is no example with Svelte 5 because of this.)

Describe the proposed solution

Remove the requirement of a mandatory contenteditable attribute for binding to element content.

Importance

would make my life easier

[Serator]

#3311 (comment) - additional information on the topic.

[7nik]

Why do you need it when you, in general, control the content of non-contenteditable elements?

[Serator]

In my script, I get a block of code from a .md file and wrap it in a component. The "Copy" button takes the contents of the code block and places it on the user's clipboard.

Now for this, I'm doing something like:

let codeElement: HTMLElement | undefined = $state()
let codeListing = $derived(codeElement?.innerText ?? '')

...

<div bind:this={codeElement}>
  {@render children()}
</div>

but I'd like to do it this way:

let codeListing = $state('')

...

<div bind:innerText={codeListing}>
  {@render children()}
</div>

[hasinoorit]

What if, I make changes to innerHTML? DOM will be out of sync?