Vaadin 23, converting inline Polymer template for grid columns renderes "NaN" instead of values

Question

I am trying to convert some inline polymer templates for grid columns, and the rendered value in the browser ends up as “NaN” for some reason.

So I simplified the template to reproduce the issue as the following:

grid.addColumn(LitRenderer.<SamplePerson>of("<span style='${item.stylename-0}'> test </span>")
                    .withProperty("stylename-0", dto -> "background-color: red"));

and the rendered value still says style="NaN". Is there something that I’m missing?

Steps to reproduce the issue:

1. Go to https://start.vaadin.com and add a Master-Detail view from the existing templates to the views.
2. Download the application and open it in your favorite editor.
3. in the com.example.application.views.masterdetail.MasterDetailView's constructor, add the column with a LitRenderer (you can copy the above snippet code as well).
4. Run the application, go to http://localhost:8080 and observe that the values for the manually added column hasn't been styled with a red background. Obviously, by inspecting the elements you could see the style="NaN" is rendered on the client.

Tested with V23.2.3 and V23.2.4 and the issue exists.

Answer 1

Nicely spotted by @leif-Åstrand, this was an issue regarding the -0 ending, which was being parsed as a mathematical subtraction in JS, and clearly resulting in "NaN".

The correct way of doing this kind of dynamic class or style values ("stylename-0", "stylename-1", ...) is to treat them as strings, so:

style='${item.stylename-0}'

should be written as

style='${item['stylename-0']}'