LitRenderer with Conditional elements

Flow
1

Are there any examples of using LitRenderer with conditions that result in different elements? Or if it is even possible?

My use case is building an element to display an object that may or may not be navigable. If navigable, then use an anchor with an href attribute. If not navigable, use a span element.

I know how to use conditions inside an element. For example, I tried to use the disabled attribute in the anchor, <a href='${item.href}' ? disabled=${item.disabled}>${item.text}</a>. Unfortunately, disabled is not a valid attribute of anchor and so disabled is ignored. A shame.

I tried generating the complete html, i.e., something like LitRenderer of("${item.html}").withProperty("html", value -> htmlFor(value)). But that is interpreted as text, not an element.

I am going to try it with a custom subclass of ComponentRenderer, and that should work. I just wanted to know if there was a simpler approach. Thanks.

2

I prefer to have my “complex” renderer to be a separate JS file, in there you have way more possibilities - e.g. have a attribute decide what to render and so one…

Here is a good example by Tomi with an even more advanced use-case with custom lit methods Let LitRenderer use (some of) Lit's built-in directives · Issue #2753 · vaadin/flow-components · GitHub

1 Like
3

The ternary operator works for simple cases: Conditionals – Lit