0

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

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

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

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

4

2 回答 2

3

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

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

于 2018-08-10T10:59:17.447 回答
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-contextCSS 规则只针对text-field低于的部分vaadin-combo-box

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

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

于 2018-08-10T09:36:22.917 回答