[zelly]

If you're using a framework like lit-html as the author recommends, it will replace the string every update. Most people will prefer that way since it's more ergonomic and similar to React. You could do imperative DOM updates, but that'd be like going back in time to jQuery.

[claviska]

This is false. It does not replace the entire string, but uses a template literal to identify which changes need to be made before selectively updating the DOM.

This video is a few years old, but the core concepts remain the same.

https://m.youtube.com/watch?v=Io6JjgckHbg

[robertlagrant]

Wow, that's a pretty compelling video. I guess they all are, but I like the use of modern web standards.

[jaredcwhite]

This simply isn't true. Tagged template literals are not string concatenation. Also any "thin layer" of tooling on top of vanilla web components (like Lit) is entirely capable of passing complex objects as props. String-only "props" are only the case for literal HTML attributes in your source HTML—and even then you can embed JSON in an attribute and get a real parsed object within the component.

[dmitriid]

> Tagged template literals are not string concatenation

They are not concatenation by themselves. But for them to be useful, you will end up doing a lot of it because there's nothing else to do with strings than parse (often with regexps [1]) and concatenate [2] the strings. And then you dump the concatenated string into the DOM using `.innerHtml` [3]

There's no magic.

[1] https://github.com/lit/lit/blob/main/packages/lit-html/src/l...

[2] https://github.com/lit/lit/blob/main/packages/lit-html/src/l... and https://github.com/lit/lit/blob/main/packages/lit-html/src/l... and so on.

[3] https://github.com/lit/lit/blob/main/packages/lit-html/src/l...

[brundolf]

Right, all I'm saying is this is nothing intrinsic to the Web Components standard like the parent comment suggested. It's just one particular way you might use them.