Vaadin 24中如何实现vaadin-grid鼠标悬停时整行高亮？

问题的核心是Vaadin 24中，vaadin-grid::part(row) 的背景会被每个单元格的 body-cell 组件背景覆盖，因此直接设置行的背景色无法生效。正确的做法是针对悬停行内的所有单元格设置背景色：

vaadin-grid::part(row):hover ::part(body-cell) {
  background: var(--lumo-primary-color-10pct);
}

补充说明 #

如果你的网格启用了斑马纹、选中行样式等默认效果，这些样式的优先级可能会高于自定义悬停样式，此时可以通过!important强制覆盖（仅在必要时使用）：

vaadin-grid::part(row):hover ::part(body-cell) {
  background: var(--lumo-primary-color-10pct) !important;
}

这种写法对应Vaadin 14中通过子选择器定位单元格的逻辑，只是适配了Vaadin 24的Shadow DOM ::part 语法，确保悬停行内的所有单元格同步应用背景色，实现整行高亮效果。

内容的提问来源于stack exchange，提问作者robg