0

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?

Steffen Harbich
  • 2,639
  • 2
  • 37
  • 71

2 Answers2

3

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

Jouni
  • 2,830
  • 15
  • 12
  • That works, thank you. However, it feels complicated and a little error prone in case Lumo theme is changed because I need to explicitly specify the border radius for the case that it is the "normal" text field: `border-top-left-radius: var(--my-border-radius-override, var(--lumo-border-radius)) !important;` – Steffen Harbich Aug 13 '18 at 11:57
  • 1
    Shameless plug: I added this solution as a recipe on https://vaadin.recipes/?p=45 – Maciej Piotr Przepióra Sep 20 '18 at 09:49
1

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()

Maciej Piotr Przepióra
  • 354
  • 2
  • 9