Custom Theme inside WebComponent

Flow
1

I want to export a WebComponent with a custom theme, so that the theme is included in the shadow dom of my WebComponent. Is there some obvious way? I did some digging, and this is what I found:

For registering a custom theme, I need to write @Theme(themeClass=MyTheme.class), and com.vaadin.flow.server.frontend.scanner.FullDependenciesScanner#verifyTheme forbids me to add a theme name here… so far so good.
But when the WebComponent is built in com.vaadin.flow.server.webcomponent.WebComponentGenerator#generateModule, the themeName is used, which was set by com.vaadin.flow.server.frontend.scanner.FullDependenciesScanner#discoverTheme to an empty string because the only way, this could be something else is, when verifyTheme returns a ThemeData-object with a non-blank themeName, which is when a @Theme(“myTheme”) annotation was used… and then I cannot use a custom theme :frowning_with_open_mouth:

2

Where did you put the theme annotation?

3

On the WebComponentExporter

4

Could you post the error you get from FullDependenciesScanner?
Do you happen to have multiple Theme annotations in the application?

5

com.vaadin.flow.server.ExecutionFailedException: Error occured during goal execution: Theme name and theme class can not both be specified. Theme name uses Lumo and can not be used in combination with custom theme class.Please run Maven with the -e switch (or Gradle with the --stacktrace switch), to learn the full stack trace.

6

I don’t have a second @Theme because that would be caught by the AnnotationValidatorServletContextListener with such an error:

Using multiple different Theme configurations is not supported.

7

Sorry for the silly question: why do you say you cannot specify theme name on the annotation on webcomponent exporter class (e.g. @Theme("mytheme")) instead of theme class?
Is it because it is not explicitly mentioned int the documentation, or because you are facing error using theme name instead of theme class?

8

Not silly at all, now that I read my initial question again :slightly_smiling_face:

What I want is this:
@Theme(value = "my-own-theme", themeClass = MyOwnTheme.class)
A Theme with a name (“my-own-theme”) and a class (MyOwnTheme, that is not Lumo).
But when I define the @Theme like I want, then vaadinBuildFrontend fails with the “Theme name and theme class can not both be specified.” error message. I just checked, now the error comes from com.vaadin.flow.server.frontend.scanner.FrontendDependencies#computeApplicationTheme, I think I got mixed up in the stacks while debugging above

9

Yeah, FullDependenciesScanner#verifyTheme was the wrong place to look at.

10

What does not help is, that the following setup works:

  • start Vaadin in dev mode without the theme annotation
  • add the theme annotation with both, value and themeClass, to the appShell (or anywhere I suppose)
  • restart Vaadin in dev mode

Then I see my-own-theme in effect in both, the standalone and the webcomponent variant

11

It looks like a bug. I need to take a deeper look into it

12

Anyway, defining both attributes is not supported since they are two different ways of handling a theme

13

You mean, that the @Theme with both attributes is applied on a “dirty” project? And should I upload something to reproduce the bug to github? I have a vaadin-starter here anyways :wink:

14

I mean that if both attribute are set, the application should always fail :slightly_smiling_face:
But I may be wrong
If you have a reproducer, please create an issue on GitHub, so that we can check if it is a bug or not

15

I will

16

So if I understand correctly, the WebComponentGenerator uses the themeName (which comes from the @Theme’s value) to load a theme into the webcomponent’s shadow DOM.
I was hoping that I could also use a @Theme with themeClass to be put into the shadow DOM; do you have a pointer to how that is possible?

17

Actually documentation example uses themeClass

18
19

https://github.com/vaadin/flow/issues/18952

20

Thanks, I’ll see if this helps