How to style child items of a combobox (flow)

Flow
1

Hello,
i want to build a few different comboboxes. For that i build a theme for a custom combobox class where i import this theme:

<dom-module id="combobox-normal-theme" theme-for="vaadin-combo-box">
    <template>
        <style>
            :host(.combobox-noclear) [part="clear-button"]
 {
                display:none !important
            }
            :host(.combobox-notoggle) [part="toggle-button"]
 {
                display:none !important
            }
        </style>

    </template>
</dom-module>
<dom-module id="vaadin-combo-box-item-theme" theme-for="vaadin-combo-box-item">
    <template>
        <style>
            :host([selected]
)::before {
                content: none;
            }
            :host([tabindex]
)::before {
                content: none;
            }

            :host([tabindex]
) {
                padding-left: 5px;
            }

        </style>
    </template>
</dom-module>

<dom-module id="vaadin-text-field-theme" theme-for="vaadin-text-field">
    <template>

        <style>

            :host(.myClas123) {
                --lumo-text-field-size: 10px;
            }

        </style>

        </div>
    </template>
</dom-module>

The first two parts are working (vaadin-combo-box and vaadin-combo-box-item). However i can’t get the custimization for the vaadin-text-field of the vaadin-combo-box to work. The problem is, that i am not able to assign the class “.myClas123” to the textfield of the combobox (because there is no function like mycombobox.getComboboxTextField.addClass() ). I can just globally use it without the class attribute.

Can anyone tell me how i can theme the textfield of a comboox locally and not global?

2

Hi Jonas,

I’m not sure that’ll be possible until V12.

With V12, however, you’ll be able to do the following:

Java

ComboBox cb1 = new ComboBox();
cb1.getElement().getThemeList().add("my-combo-box");

ComboBox cb2 = new ComboBox();

my-combo-box.html

<dom-module id="my-combo-box" theme-for="vaadin-combo-box">
  <template>
    <style>
      vaadin-text-field[theme="my-combo-box"]
 {
        background: red;
      }
    </style>
  </template>
</dom-module>

Result: (see attachment)

17416286.png

3

Just tried it after the Vaadin 12 release today. Works perfect. Thank you.