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

【问题标题】：How to change style of combo box in Vaadin 10如何在 Vaadin 10 中更改组合框的样式
【发布时间】：2018-07-27 08:31:57
【问题描述】：

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

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

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

这正在改变样式，但这并不是我想要的。根据docs，我应该按照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？ 如何设置该部分的样式？

【问题讨论】：

标签： css vaadin shadow-dom vaadin10 vaadin-flow

【解决方案1】：

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

这是 Vaadin 论坛上的类似答案（text-align）：https://vaadin.com/forum/thread/17197360

【讨论】：

行得通，谢谢。但是，如果 Lumo 主题被更改，感觉很复杂并且容易出错，因为我需要为它是“正常”文本字段的情况明确指定边框半径：border-top-left-radius: var(--my-border-radius-override, var(--lumo-border-radius)) !important;
无耻插件：我将此解决方案作为配方添加到 vaadin.recipes/?p=45

【解决方案2】：

这有效（至少在最新的 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()

【讨论】：

不幸的是 :host-context() 没有被 ShadyCSS、AFAIK 填充。
没错，我没想到。