Hello, after moving from 24 to 25, how can I implement negations or slotted styles like these?
I may missing come css skills, please advice me.
/* old shadow style*/
[part~="body-cell"]:not([part~='details-cell']) ::slotted(vaadin-grid-cell-content) {
height: 100%;
}
Something like this does not work, is not valid css, or have the beloved effect:
vaadin-grid::part(body-cell):not([part~='details-cell']) vaadin-grid-cell-content {
height: 100%;
}
Yeah, part selectors cannot be negated like that, and you also cannot refer to an element slotted into a part (parts are “leaf nodes” in the selector path).
However, you don’t need that negation at all, since the details-cell does not have the body-cell part, so you can just do
vaadin-grid::part(body-cell) { ...}
But note that, as I mentioned above, you also cannot target a vaadin-grid-cell-content inside a specific part like that. In most cases, however, you should be able to just target the cell itself rather than the content wrapper inside. (There are ways to do that, but it’s a bit complicated and rarely actually needed.)
In this particular case, you could probably replace height:100% on the content wrapper with align-items: stretch; on the body-cell.
If you tell me more about why you need to set height: 100% on the content wrapper, I might be able to find a different solution for you.
We implemented a system to optionally show multi line text in the grid (height of row / cell).
By default, the multi lines are there, but hidden through the components overflow style.
Using just vaadin-grid vaadin-grid-cell-content affects also header cell, which looks not good.
See the multi line without height: 100% :
Thanks, align-items: stretch; did work!
I was only focusing on migrating existing code instead of writing new one 
Ah, I see! I do think that would have been doable without touching the content wrapper at all, by operating just on the cell styles, but since you have a solution that works now, I suppose there’s not much point in additional refactoring