How to change style of combo box in Vaadin 10

Question

I would like to adapt a combo box component's CSS. The combo box has my style class custom1 added which should disable border radius for left corners.

In my shared-styles.html , I tried to adapt CSS properties:

.custom1 {
    --lumo-border-radius: 0px;
}

This is changing the styles but it is not exactly what I want. According to docs , I should follow this wiki to apply local scope styles for the web component. So, I tried:

<custom-style>
<style>
...
</style>
</custom-style>
<dom-module id="my-combo-box-theme" theme-for="vaadin-combo-box">
  <template>
    <style include="vaadin-combo-box-default-theme">
       :host(.custom1) [part="input-field"] {
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
       }
    </style>
  </template>
</dom-module>

However, it didn't work and the part input-field is located like that:

<vaadin-combo-box>
    <vaadin-text-field>
        ...
            <div part="input-field">
                ...
            </div>
        ...
    </vaadin-text-field>
</vaadin-combo-box>

Which is a problem I guess, because it is a shadow DOM under a shadow DOM? How can I style that part?

Answer 1

You need a style/theme module for vaadin-text-field which exposes a new custom property for border-radius , which you can then adjust from the style/theme module for vaadin-combo-box .

Here's a similar answer on the Vaadin Forum (for text-align ): https://vaadin.com/forum/thread/17197360

Answer 2

This works (at least in latest Chrome).

<dom-module id="my-combo-box-theme" theme-for="vaadin-text-field">

    <template>

        <style>

            /* styling for combo-box */

            :host-context(vaadin-combo-box.custom1) [part="input-field"] {

                border-top-left-radius: 0px;

                border-bottom-left-radius: 0px;

            }

        </style>

    </template>

</dom-module>

The key here is to use :host-context CSS rule to only target text-field part if it's under vaadin-combo-box

:host-context basically allows to target ShadowDOM-in-ShadowDOM

The more in-depth description of :host-context can be found on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context()