Upon hover, how to highlight entire row of vaadin-grid in 24?

I'm in the process of upgrading my Polymer 3.0 Javascript app from v14 Vaadin Components to V24. I've overcome many breaking changes, but I haven't been able to solve this one.

In Vaadin 14, I'm able to highlight a row in a grid upon hover with this placed in a custom theme for vaadin-grid:

[part~="row"]:hover > [part~="body-cell"] {
  background: var(--lumo-primary-color-10pct);
}

In Vaadin 24, styling of a row in vaadin-grid is per the CSS selector:

vaadin-grid::part(row)

Using this selector, I have not been successful at applying a background color to a grid row (with or without the :hover pseudo-class).

For example:

vaadin-grid::part(row):hover {
  color: green;
  background: orange;
}

selects any row hovered over, applying green to the text, but the background is unchanged.

vaadin-grid::part(body-cell):hover {
  color: green;
  background: orange;
}

selects any cell hovered over, applying both green to the text and orange to the background.

How can I apply a hover highlight to an entire row of vaadin-grid in 24?

first of all, that same CSS you used in V14 should still work in V24.

In the new "native CSS way" of styling in V24, this is indeed a bit tricky, since the hover state is on the row, but the default background is defined on the cell, and you can't chain part selectors like ::part(row):hover::part(cell) or something.

So what you need to do is define a custom property on the row, e.g. --row-bg like so:

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

And then apply that property as the cell background:

vaadin-grid::part(cell) {
  background: var(--row-bg);
}