In old Observable, yielding the same node repeatedly did not cause the node to be removed and reinserted. In new Observable, it does. This makes certain sorts of updates challenging, because the nodes are “new” to the DOM on every update.
To see the difference, view this simple example in old:
and new:
In Old Observable, the inspector has a check to avoid re-inserting the same element:
New Observable has no such check, and so the element is always appended to the DOM when you display it, even if it’s already there. That feels like the most “obvious” behavior to me, although I understand in your case it’s not what you want.
It’s a bit hard with these reduced examples to suggest an alternative, since it’s so abstract. (What’s the point of yielding the same element again and again when nothing has changed?) If you want to avoid re-appending the element, you could display it first, and then mutate it within the generator loop:
(async function* () {
const span = html`<span>…</span>`;
const div = display(html`<div>
<style>
@scope {
:scope {
transition: background-color 0.5s;
background-color: lightblue;
@starting-style {
background-color: red;
}
}
}
</style>
${span}
</div>`);
while (true) {
await Promises.delay(1000);
span.textContent = Date.now();
yield;
}
})()