Css 如何更改Vaadin 10中组合框的样式

我想调整组合框组件的CSS。组合框中添加了my style类

custom1

，该类应禁用左角的边框半径

在我的shared-styles.html中，我尝试调整CSS属性：

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

这是改变的风格，但它并不完全是我想要的。根据，我应该遵循以下步骤为web组件应用本地范围样式。所以，我试着：

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

我想这是个问题，因为它是影子DOM下的影子DOM如何设置该部件的样式？

此功能有效（至少在最新的Chrome中）

/*组合框的样式*/
：主机上下文（vaadin组合框.custom1）[part=“input field”]{
边框左上半径：0px；
边框左下半径：0px；
}

这里的关键是使用

：主机上下文

CSS规则仅针对

文本字段

部分，如果它位于

vaadin组合框下

：主机上下文

基本上允许在ShadowDOM中以ShadowDOM为目标

关于主机上下文的更深入的描述可以在MDN上找到：

这是有效的（至少在最新的Chrome上）

/*组合框的样式*/
：主机上下文（vaadin组合框.custom1）[part=“input field”]{
边框左上半径：0px；
边框左下半径：0px；
}

这里的关键是使用

：主机上下文

CSS规则仅针对

文本字段

部分，如果它位于

vaadin组合框下

：主机上下文

基本上允许在ShadowDOM中以ShadowDOM为目标

---

关于

：主机上下文的更深入的描述可以在MDN上找到：
您需要一个用于
vaadin文本字段的样式/主题模块
，它为
边框半径
公开一个新的自定义属性，然后您可以从
vaadin组合框的样式/主题模块
中进行调整

在Vaadin论坛上有一个类似的答案（对于
text align
）：
您需要一个
Vaadin text field
的样式/主题模块，它为
边框半径
公开一个新的自定义属性，然后您可以从
Vaadin组合框的样式/主题模块中调整该属性

在Vaadin论坛上有一个类似的答案（对于
文本对齐
）：
不幸的是
：host-context（）
不是由ShadyCSS，AFAIK多填充的。是的，我没有想到这一点。不幸的是
：host-context（）
不是由ShadyCSS，AFAIK多填充的。是的，我没有想到这一点。谢谢。但是，如果Lumo主题发生更改，它会感觉很复杂，并且有点容易出错，因为我需要显式指定“正常”文本字段的边框半径：
边框左上角半径：var（-my border radius override，var（-Lumo border radius））！重要的无耻的插件：我添加了这个解决方案，作为有效的配方，谢谢。但是，如果Lumo主题发生更改，它会感觉很复杂，并且有点容易出错，因为我需要显式指定“正常”文本字段的边框半径：
边框左上角半径：var（-my border radius override，var（-Lumo border radius））！重要的无耻的插件：我在
<vaadin-combo-box>
    <vaadin-text-field>
        ...
            <div part="input-field">
                ...
            </div>
        ...
    </vaadin-text-field>
</vaadin-combo-box>

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