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

Question

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.

Answer 1

It is the <vaadin-grid-cell-content> element which is slotted inside the cell. So ::slotted(*) won't actually target the <a> element you have inside it. Also, style from the global scope (light DOM side) have higher specificity than styles defined in the shadow DOM (::slotted).

I believe this case needs a CSS custom property, which you set based on the selected state of the row, and then use that custom prop for the links inside a grid:

vaadin-grid.css:

[selected] {
  --link-color: white;
}

styles.css (global scope):

vaadin-grid a {
  color: var(--link-color, var(--lumo-primary-text-color));
}