Custom component @Tag annotation and styling

Flow
1 
// creating my own component
@Tag("my-button")
public class MyButton extends Button {
}
// using it
var foo = new MyButton("foo");
foo.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

this would generate html

<my-button theme="primary">foo</my-button>

but no style is actually applied, so how should be using @Tag then.

2

LUMO_PRIMARY only applies to vaadin-button elements, and you’re replacing the default tag name with @Tag. In general, replacing the tag name is not something you would do when extending a Vaadin component.

What are you trying to achieve with @Tag here?

3

i want to create a custom component and that my custom component appears as such in the html so i know it is a custom component (and which one and where’s the code that defines it)

we already have a code base with these custom components, just want to make it obvious that we are using them instead of raw vaadin

4

Sounds like reinventing the wheel and making your life unnecessary harder. If you really wanna do that - ensure you have a matching JS/TS companion file that also extends the Vaadin JS file and there import Lumo/Aura.

Your other requirements sound more like a “my other developers are bad… I need to stop them some how”, just some ideas:

  • teach them
  • shade the Vaadin components
  • Add ArchUnit or some other framework that checks what is imported
  • Don’t use a custom tag - you can just use Vaadin’s Devtools to locate the source code (even tho… how bad is your code designed so that you always have to look it up?)
5

shade the Vaadin components

i don’t understand what you mean

how bad is your code designed so that you always have to look it up?

don’t know, i seldom touch this project and that’s why wanted something easy to know where i am

6

Use Maven Shade Plugin so that the components are not easily available for your coworkers because their import has changed from e.g. com.vaadin to lorem.ipsum.not.allowed.components.vaadin