Custom Style for component instances in Flow 14

Flow
1

Hi,

Unfortunately I’m no good in CSS and I want to achieve the following: I want to change a style in the shadow dom of a component. Lets say a Vaadin Select component. I can use the following style (thanks again Jean-Christophe Gueriaud for your advice)

[part="toggle-button"]
 {
      	color:red;
      }

This is being loaded via

@CssImport(value = "./styles/toggle-button.css", themeFor = "vaadin-select")

But this will be applied on all select components in my view. But how can I apply this to only those select components, which has an ID pattern such as SELECT-1, SELECT-2, SELECT-3 … ?
It looks like I could use CSS attribute selectors but I don’t know how to bring these together with my setup.

2

Hi,

You can add your own theme attribute.

It’s well explained in the documentation: https://vaadin.com/docs/v14/themes/styling-components.html#scoping-component-styles