Search code examples
web-componentlit-elementlit

What is the difference between value=${"Hello"} and .value=${"Hello"} syntax in Lit

I'm reading the Lit docs, and found that: https://lit.dev/docs/templates/expressions/#property-expressions

html`<input .value=${this.itemCount}>`;

Testing: I removed the dot before "value" word and nothing changed.

Why I need to add this dot ?

Solution

  • The dot makes it a property, and the other is an attribute.

    Attributes only takes in strings. That means if you pass an object, function or array, these will be converted to strings, and then converted back again in the receiving component. This can become quite expensive.

    Using properties, your objects, functions and arrays are not parsed, which is why properties (.myProperty) are faster.