Question

我想修改组合框组件的CSS。组合框添加了我的样式类custom1，该样式类应禁用左角的边框半径。

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

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

这正在改变样式，但这并不是我想要的。根据{{3}}，我应该遵循docs来为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>

但是，它不起作用，input-field部分的位置如下：

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

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

Answer 1

您需要一个vaadin-text-field的样式/主题模块，它为border-radius公开一个新的自定义属性，然后您可以从vaadin-combo-box的样式/主题模块进行调整。

在Vaadin论坛上（针对text-align），有一个类似的答案：https://vaadin.com/forum/thread/17197360

Answer 2

这有效（至少在最新的Chrome中）。

rm -r .idea

此处的关键是使用<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> CSS规则仅将目标:host-context定位在text-field之下

vaadin-combo-box基本上可以定位ShadowDOM-in-ShadowDOM

在https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context()的MDN上可以找到对:host-context的更深入的描述

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

2 个答案: