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

Question

我想调整组合框组件的 CSS。组合框添加了我的样式 class custom1，它应该禁用左角的边框半径。

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

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

这是在改变样式，但这并不是我想要的。根据 docs, I should follow this wiki 为 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

这有效（至少在最近 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>

这里的关键是使用 :host-context CSS 规则只针对 text-field 部分，如果它在 vaadin-combo-box

:host-context 基本上允许以 ShadowDOM-in-ShadowDOM 为目标

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

Answer 2

您需要一个用于 vaadin-text-field 的 style/theme 模块，它为 border-radius 公开一个新的自定义属性，然后您可以从 style/theme 模块进行调整vaadin-combo-box.

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

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

How to change style of combo box in Vaadin 10

css

vaadin

shadow-dom

vaadin10

vaadin-flow