LitElement support 1.0 for Java developers

[mstahv]

As a Vaadin developer using Java for UIs, I want to be able to define my view as a LitElement template and connect UI logic to it using pure Java and only Java.

Acceptance criteria

• When creating declarative layouts (templates), things are based on Lit (instead of current Polymer)
• When the template state is customized (via designer or by hand), the state should be 1-1 to the mapped Java component instances (AKA attributes are read by Flow)
• It is possible to use either TS or JS as the template format, however TS is used in documentation

General criteria

• Any relevant parts in the products are updated like the component add-on starter
  • Excluding Bakery
• Any template examples should be TS, not JS
• Usage of PolymerTemplate is discouraged (in code & docs) by deprecating things
• Special cases are taken care of when reading templates:
  • global html attributes & theme are read as attributes, everything else is a property
  • it is not possible to drive data or define grid columns (or similar) via the template - this is considered to be Java logic
• Related existing DX issues are fixed
  • toggling visibility from server side does not work without workaround
  • setting text to any element/component does not work

Details

• Documentation: vaadin.com/docs (or during development the material can be found mostly from https://github.com/vaadin/flow-and-components-documentation/tree/master/documentation/templates). Template related docs are spread to multiple chapters.
• How to test? Create the Form part in our Web App tutorial using LitElement template instead of pure Java approach. If Designer already supports Lit, the template should be composed using Designer. https://vaadin.com/learn/tutorials/modern-web-apps-with-spring-boot-and-vaadin/creating-custom-reusable-components-in-vaadin
• Limitations: Many of the features we had with Polymer templates are not supported with Lit based templates, such as data binding aka template model, sub templates and event listeners. Grid columns cannot be specified via templates. No element information regarding the mapped elements is parsed to server side. Enabling/disabling mapped elements from server side is limited to only that element, as the hierarchy is not parsed.

[knoobie]

Do you plan to integrate I18NProvider in some way as well? Would love to customize my templates with properties / different languages. Like some kind of "custom" i18n implementation on top of lit?

That would allow for easier templating like with the ancient and lovely CustomLayout where it was possible to overwrite the HTML-content and replace some variables with translations before Vaadin adds all components to the data-location.

[pleku]

@knoobie that would be a good idea and there is a ticket about it, but not sure when it would be a part of the roadmap vaadin/flow#3906
We'll need to discuss this internally.

[knoobie]

@pleku thanks! 👍