Lit versions of Vaadin web components

General
1

Hi,

I noticed that the Lit versions of Vaadin components are included in the distribution, but they come with a disclaimer stating that they are experimental and not officially part of the supported platform.

Has anyone had experience using these Lit components? Could you share some overall feedback on their current state, including what works well, what doesn’t, and any benefits you’ve observed?

2

Thanks for bringing this up. We haven’t had a chance to finalize Lit versions (there might be a chance to get this done in Vaadin 25 although there is no clear plan for this at the moment).

One major change is the fact that in Lit, initial rendering is async (and we can’t really change it, although we did add a logic to make further property updates synchronous).

This leads to e.g. the following snippet workin with Polymer but not Lit:

<script type="module">
  import '@vaadin/text-field';

  const field = document.createElement('vaadin-text-field');
  document.body.appendChild(field);
  field.focus();
</script>

The reason is that Polymer renders DOM immediately in connectedCallback() so the web component runs internal logic to create slotted <input> and it can be focused.

In case of Lit version, the DOM is only rendered after updateComplete promise is resolved, so calling focus() synchronously wouldn’t work.

This problem is described in [reactive-element] Initial render is delayed · Issue #3581 · lit/lit · GitHub and the answer from Justin makes me think this won’t be changed in the foreseeable future:

Async rendering is a fundamental design choice of Lit. It’s usually a pure benefit and not noticable, but some cases like this might have to take it into account.

2 Likes