lit-html update disconnects custom-element

[fopsdev]

i have a somewhat basic question.

if i do a render like html${comp1} ${comp2} lit will render me those two components fine
but i was thinking now that a subsequent html${comp2} will just remove ${comp1} from the dom because lit is doing an update.

Now if my comps are custom-elements i would then expect that the disconnectedCallback for comp2 doesn't get called.

but as you can see in:
https://codepen.io/fopsdev/pen/OoQJLz?editors=1111
disconnected get called for both comps.
would appreciate some help here :)

[CaptainCodeman]

I think that's because you are not _updating_ the template, you are rendering a completely new one. If you instead wrap the ${comp1} in a directive to render or not render based on a flag then the ${comp2} element will not be disconnected.

[fopsdev]

hmmm...thanks for the explanation. but then why:
https://codepen.io/fopsdev/pen/OoQJLz?editors=1111
is still disconnecting component 2?

[fopsdev]

i see now that using repeat directive i get the expected behaviour:
https://codepen.io/fopsdev/pen/yxpoBJ?editors=1111
does this mean that i always should use repeat if i render more than one comp?
or in other words: lit-html keeps track of the components and updates those nicely (without unecessary discconnect/connect) but only if i use repeat?
looks like i need to dig into the repeat directive a bit :)

[ruphin]

No, that is not what is going on.

Your component 2 is disconnected because it is in a different template. Lit-html does not understand differences between templates (like virtual-DOM), it works by understanding what parts of a template are static vs dynamic. If you want to have lit-html understand that a certain item is static (like your component 2) it needs to be part of a static part of the _same_ template.

Here is a fixed version:
https://codepen.io/ruphin/pen/MqQaPY?editors=1111

The difference is that it always renders the _same_ template, and the presence of the first component is toggled inside that template.

[fopsdev]

Hi ruphin,
Thanks a lot for giving me just another light-bulb-moment :)
Of course, and now i understand why, optimizations can only be done within one template 👍