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

Flow
1

Hi,

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.

Thanks

2

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.

3

Hi Jouni, Thanks for the response.

In reference to this [thread]
(https://vaadin.com/forum/thread/18253213) , 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.

@StyleSheet("http://localhost:90/styles.css")

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?