Combining selected row styling and background-image in grid

[Guttorm (Guttorm Vik)]

I want to use my own custom background-image that partly fills the cell, but it seems to also override the selected row background color, and I don’t see why.

Here’s how my grid looks:

And here’s part of my styling

.myScreen {}

    && vaadin-grid {
        
        &&::part(requeststatus-greenIcon) {
            background-image: url(icons/green-requeststatus.png);
            background-repeat: no-repeat;
            background-size: auto 70%;
            background-position: center;
        }

The partName is set by a gridCol.setPartNameGenerator

[web-padawan (Serhii Kulykov)]

The problem is caused by the fact that selected state uses background-image internally:

vaadin/web-components/blob/b00d1b6cd3cfc36407e5cf29717c0332523da906/packages/grid/theme/lumo/vaadin-grid-styles.js#L336-L339

BTW same applies to even rows when using row-stripes theme variant.

[Guttorm (Guttorm Vik)]

@web-padawan

background-image: linear-gradient(var(--_lumo-grid-selected-row-color), var(--_lumo-grid-selected-row-color));

Thanks, that explains it. Now that I know this avenue is closed, it shouldn’t be too hard to just generate a div as cell content and style that instead.