Not able to apply CSS to shadow DOM of any vaadin components


I am relatively new to vaadin and have been trying to apply style to shadow DOM inside vaadin components.

Apart from @CssImport(value = "./custom-menu-style.css", themeFor = "vaadin-menu-bar") is there any way I can apply style to elements inside a component directly from Global scope using element’s class or id?

I have tried everything I can find on internet and none of it seems to work. Any help is appreciated.


The short answer to your question is no, you can’t apply styles to shadow DOM from the global scope.

I would like to know what you are trying to achieve. We would probably be able to help then.

Hi Jouni, Thanks for the response.

In reference to this [thread]
( , we have hosted our CSS to a apache web server on local machine. We are hot deploying SCSS from our application directly to the server and picking it up in our MainView using @StyleSheet.


Is there any way using CSS selectors by which I can apply style to Shadow DOM of vaadin component from Global scope?

Moreover, we have moved frontend folder to META-INF. If I want to use @CssImport, will I have to provide absolute path of the css resource?