Styling nested slots without components folder (V25)

Flow
1

How can I migrate the following css from V24 to V25 to ensure that sidenav items can wrap correctly? I tried various versions - nothing worked.

Vaadin 24 - vaadin-side-nav-item.css

/* allow wrapping of long side nav entries */
:host(.stacked) slot:not([name]) {
  white-space: normal !important;
}

CSS to be changed: web-components/packages/vaadin-lumo-styles/src/components/side-nav-item.css at 3a506078602e766bf01cda87cdc72ecd7f2b4976 · vaadin/web-components · GitHub

I tried a top of different variants…

vaadin-side-nav-item::part(link)
vaadin-side-nav > [slot="label"]
vaadin-side-nav > slot:not([name])::slotted(*)
vaadin-side-nav-item::part(link) ::slotted
....
2

There’s no selector that can target that slot element from light DOM. I think we’ll need a custom property to control this.

As a workaround, wrap the nav item label wit a <span style="white-space: normal;">.

1 Like
3

Sadly there is no Java API for it :) I can only add a String… (Looks like I need to go to the element level)

Thanks for the idea! Gonna test it

Edit: Workaround works!