Styling Shadow DOM of Vaadin Components

Flow
1

Hello everybody,

I am using Vaadin 14.0.12 and try to style the dom parts of Vaadin elements.
Before Vaadin 14 i had an sharedHTML.html File wich contained something like this:

<dom-module id="my-combo-box" theme-for="vaadin-combo-box"> <template>
<style>
[part="text-field"]
 {
	....
}
</style>
</template> </dom-module>

How are the inner elements of a Vaadin component styled in Vaadin 14+?

best regards
Jan Reinartz

2

Hi, in Vaadin 14 we added @CssImport annotation in Java to write these styles in CSS files.

https://vaadin.com/docs/v14/flow/theme/theming-crash-course.html

3

That link doesn’t actually describe what OP asked for :wink:

  • use @CssImport("./styles/mystyles.css) for “normal” CSS.
  • use @CssImport(value="./styles/mystyles.css", themeFor="vaadin-combo-box") for scoped CSS like this case. Use the same value for themeFor that you used in the old sharedHTML.html for theme-for