Me gustaría adaptar el CSS de un componente de cuadro combinado. El cuadro combinado tiene mi clase de estilocustom1 agregado que debería deshabilitar el radio del borde para las esquinas izquierdas.

En mi shared-styles.html, Intenté adaptar las propiedades CSS:

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

Esto está cambiando los estilos, pero no es exactamente lo que quiero. De acuerdo a docs, Debería seguir aeste wiki para aplicar estilos de ámbito local para el componente web. Entonces, intenté:

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

Sin embargo, no funcionó y la parteinput-field se encuentra así:

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

¿Cuál es un problema, supongo, porque es un DOM de sombra bajo un DOM de sombra? @ ¿Cómo puedo peinar esa parte?