'Styling a component in a selected row in a grid in Vaadin 22

I've added a component column to my grid with a link which renders as follows:

<vaadin-grid-cell-content slot="vaadin-grid-cell-content-39" draggable="true">
<flow-component-renderer appid="app">
#shadow-root
<style>...</style>
<slot>
    <a> reveal
</slot>
    <a href="#" focus-target="true">Link</a>
</flow-component-renderer>

I've added the vaadin-grid.css in the components folder with following adaptions for a selected row:

:host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) {
background-color: green;
color: white;

}

Now I have the problem that the color of my link matches the background color and should be white when the row is selected. I tried several things, but nothing worked.

My best try was this one:

:host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) ::slotted(*) {
font-weight: bold;
color: white !important;

}

The font-weight is shown up bold when selecting, but the color is still the color of the global defined a-tag.

I tried to give the link a classname, to select it via

:host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) ::slotted(a.my-class-name)

but that does not work at all.

I also had class names for grid and the link and tried to select it somehow via

.grid-with-link tr[part~="row"][selected] vaadin-grid-cell-content a.grid-link {
color: white !important;

}

Can anyone give me a hint what else to try? I would prefer a solution without using an extra class name for the grid or column or link.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source