如何更改多选组合框 Vaadin 组件中切换按钮的颜色？

Question

所以我在

filter.ts

中使用 Vaadin 多选组合框，如下所示：

        <vaadin-multi-select-combo-box
          required
          placeholder="Select countries to visit"
          item-label-path="name"
          item-id-path="code"
          .items="${this.items}"
        >
          <div slot="error-message">Please select at least one country</div>
        </vaadin-multi-select-combo-box>

我正在尝试在同一文件中更改切换按钮颜色，如下所示：

  static styles = css`

     :host::part(toggle-button)::before {
       color: yellow;
     }

  `;

正如您在屏幕截图中看到的那样，哪个是正确的选择器：

但是切换按钮的颜色没有改变：

和以前一样是灰色的。

更改切换按钮颜色的正确方法是什么？

Answer 1

您使用的选择器目标

:host

，这意味着包含样式的影子根的宿主元素，这意味着样式必须位于组合框本身的影子 DOM 内才能工作。

相反，您应该定位组件的标签名称和相应的部件名称：

vaadin-multi-select-combo-box::part(toggle-button) {
  ...
}

编辑：另请参阅组件的样式文档，其中列出了所有可用的选择器：https://vaadin.com/docs/latest/components/multi-select-combo-box/styling

编辑：Lit 游乐场示例