Vaadin 组件样式混乱

Question

我正在尝试访问您必须通过 shadow DOM 的元素的各个部分。我一直在尝试像本指南中那样做：https : //github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes

将此代码添加到我的 shared-styles.html 文件中可以正常工作：

vaadin-text-field {
  border: 1px solid gray;
}

然后为了访问元素的特定部分以设置样式，它显示如下访问它：

#shadow-root (open)
  <style>
    :host {
      border: 1px solid gray;
    }
  </style>

并且您可以像这样访问特定部分（在本例中为输入字段）：

#shadow-root
  <style>
    [part="input-field"] {
      border: 1px solid gray;
    }
  </style>

我只是不明白最后 2 个代码块应该如何识别它们正在更改“vaadin-text-field”，因为它在代码片段中无处可见。单独添加这些片段当然不起作用..我觉得这是我忽略的简单事情。非常感谢，感谢 Vaadin 提供的所有帮助！

Answer 1

检查文档的Stylable Shadow Parts部分。它提供了一些有用的示例。

很快，要设置 Vaadin 组件的样式（如<vaadin-text-field>），您需要将样式添加到组件的 shadow DOM 中。为了做到这一点，定义一个带有theme-for="vaadin-text-field"属性的样式模块并将您的自定义样式放在那里。在第一次渲染 Vaadin 组件之前，寻找具有theme-for属性的样式模块并从那里选择样式。

<dom-module id="my-input-theme" theme-for="vaadin-text-field">
  <template>
    <style>
      [part="input-field"] {
        border: 1px solid gray;
      }
    </style>
  </template>
</dom-module>

<vaadin-text-field label="Username"></vaadin-text-field>

这是一个活生生的例子：https : //glitch.com/edit/#!/theming-vaadin-components-npm-p3?path=custom-theme.js :4 :0

上面的示例将更改应用程序中所有 <vaadin-text-field>s的样式。如果您只想设置某些文本字段的样式，请使用主题或属性选择器：

<dom-module id="my-input-theme" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([theme~="bordered"]) [part="input-field"] {
        border: 3px solid hotpink;
      }
    </style>
  </template>
</dom-module>

<vaadin-text-field label="Themed" theme="bordered"></vaadin-text-field>