Vaadin 25 Component Migration

Flow
1

What is the migration path for people that have extended Vaadin Core components?

For example, the following looks kinda plain now. How should this be changed to enable lumo again or switch to aura?

import {TextField} from '@vaadin/text-field/src/vaadin-text-field.js';

class MyField extends TextField {

  static get is() {
    return 'my-field';
  }
  // .....
}

customElements.define(MyField.is, MyField);
2

This is how you can enable Lumo for components extending TextField (which is the case for BigDecimalField): fix: ensure Lumo CSS is injected into BigDecimalField (#8351) · vaadin/flow-components@9759bf3 · GitHub

1 Like
3

Can confirm, works perfect! Thanks a lot :)

4

LumoInjector should be considered as a short/medium-term migration solution. We’ll refactor the official Vaadin components eventually away from LumoInjector as well (maybe in V26).

Custom components should implement their own Lumo and Aura themes, to make the component adapt to those themes. If you want your component to still look like the Vaadin component you extend, it would be better to use it in the light DOM of your own component rather than extend it and change the tag name.

It’s not really feasible to try to implement themes so that they would work with any tag name (can’t accomplish everything with custom properties). Native CSS mixins and functions will make it easier in the future.