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>

我只是不明白后两个代码块应该如何识别它们正在改变＆＃39; vaadin-text-field＆＃39;因为它在代码片段中没有任何地方。单独添加这些片段当然不起作用..我觉得它很简单，我忽略了。非常感谢，感谢Vaadin提供的所有帮助！

Answer 1

查看该指南的3. Stylable Shadow Parts部分。它给出了一些有用的例子。

很快，要设置Vaadin组件的样式（如<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <thead></thead> <tbody></tbody> </table>），您需要将样式添加到组件的shadow DOM中。为此，定义具有<vaadin-text-field>属性的样式模块，并将自定义样式放在那里。在第一次渲染之前，Vaadin组件会查找具有theme-for="vaadin-text-field"属性的样式模块，并从那里选择样式。

theme-for

以下是一个实例：https://jsfiddle.net/vlukashov/j94pazz1/

上面的示例将更改应用中所有 <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>的样式。如果您只想设置一些文本字段，请使用主题或属性选择器：

<vaadin-text-field>

Answer 2

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

在该页面的底部，您会找到读取下一个： Adding Styles to Local Scope.

Vaadin组件造型混乱

2 个答案: