How to style a custom <vaadin-select>

Hilla
6

Thank you for your suggestion, Tarek. Please note that I am talking about the Fusion world (!).

I note that it works to change the background via the class attribute, but nót via the theme attribute.

Note that the following snippet from the <select-language-component> contains both the theme and the class attribute, just to show how they are set:

render() {
  return html`
    <vaadin-select theme="my-styled-select" 
                   class="style-via-class" 
                   label="" value="nl" 
                   .renderer=${this._boundSelectRenderer}>
    </vaadin-select>
  `;
}

In this case, I have defined both in a component-specific css file that is imported as follows:

import componentStyles from "./select-language-component.css";
...
class SelectLanguageComponent extends LitElement {

static styles = [ Lumo, styles, componentStyles]
;
....

If it helps, I will put this component in a public repo.