Vaadin 组件样式混乱

Question

我正在尝试访问必须通过影子 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”，因为它在代码 sn-p 中无处可寻。单独添加那些 sn-ps 当然是行不通的。我觉得这很简单，我忽略了。非常感谢，感谢您为 Vaadin 提供的所有大力帮助！

Answer 1

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

简而言之，要设置 Vaadin 组件的样式（例如 <vaadin-text-field>），您需要将样式添加到组件的影子 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

上面的例子会改变应用中all <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>

Answer 2

最后一个示例需要您实际编辑组件内的样式标签的内容。

在该页面的底部，您会发现 阅读下一篇： Adding Styles to Local Scope.