Custom Theme inside WebComponent

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:

Where did you put the theme annotation?

On the WebComponentExporter

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

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.

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.

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?

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

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

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

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

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

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:

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

I will

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?

Actually documentation example uses themeClass

Thanks, I’ll see if this helps