Custom Style for component instances in Flow 14


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)


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.


You can add your own theme attribute.

It’s well explained in the documentation: