Como mudar o estilo da caixa de combinação no Vaadin 10
Gostaria de adaptar o CSS de um componente da caixa de combinação. A caixa de combinação tem minha classe de estilocustom1
adicionado, o que deve desativar o raio da borda nos cantos esquerdos.
No meushared-styles.html, Tentei adaptar as propriedades CSS:
.custom1 {
--lumo-border-radius: 0px;
}
Isso está mudando os estilos, mas não é exatamente o que eu quero. De acordo comdocsEu devo seguireste wiki para aplicar estilos de escopo local ao componente da web. Então, eu tentei:
<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>
No entanto, não funcionou e a parteinput-field
está localizado assim:
<vaadin-combo-box>
<vaadin-text-field>
...
<div part="input-field">
...
</div>
...
</vaadin-text-field>
</vaadin-combo-box>
Acho que é um problema, porque é um DOM de sombra sob um DOM de sombra?Como posso estilizar essa parte?