Vaadin 14 如何使用自定义CSS类基于状态为指定Tabs组件设置样式

正确写法 #

场景1：样式写在全局CSS文件中

直接选中带自定义类的vaadin-tabs组件即可：

vaadin-tabs.patient-tabs [part="tabs"] ::slotted(vaadin-tab[selected]) {
  background-color: red;
  color: #002641;
}

场景2：样式用@CssImport专门注入到vaadin-tabs的Shadow DOM中

如果你的样式是通过类似下面的注解单独指定给vaadin-tabs组件的：

@CssImport(value = "./styles/patient-tabs.css", themeFor = "vaadin-tabs")

那么在patient-tabs.css中写如下样式即可：

:host(.patient-tabs) ::slotted(vaadin-tab[selected]) {
  background-color: red;
  color: #002641;
}

原写法失效原因 #

你之前的:host(.patient-tabs)[part~="tabs"]写法逻辑错误：

• :host只在Shadow DOM内部的样式表中生效，指向的是当前Shadow DOM的宿主元素（也就是<vaadin-tabs>标签本身）
• part="tabs"是<vaadin-tabs>内部Shadow DOM里的元素属性，不是宿主元素本身的属性，把它和:host写在同一层选择器里，永远匹配不到元素
• 如果是在全局样式中写，不需要加:host，直接从外层的自定义类开始选择即可

内容的提问来源于stack exchange，提问作者despoina.k