Styling grid cell content

Flow
1

I use a componentColumn to render an img inside a grid cell.
I also have a part-name generator that sets different part-names on the cells.
How can I target both part-name and img with css?

Targetting the cell itself is fine:

grid::part(my-cell) { background: red; }

But this does not work:

grid::part(my-cell) img { border: 1px solid red; }

I can target all images with

grid vaadin-grid-cell-content img { border: 1px solid red; }

but then I can’t use the part-name?

( I can get around this by changing my componentColumn to add a regular css class to the img itself, but I’m trying to reuse an existing componentColumn )

2

Add a class name to the image you’re generating if you want to style specific images. The component will be in light DOM so you won’t need the part name to target it.

3

Using a CSS variable is also an option:

vaadin-grid::part(my-cell) { --my-cell-border: 1px solid red; }

vaadin-grid vaadin-grid-cell-content img { border: var(--my-cell-border, none) }