I'm using Tree to create a left side-bar menu which generally works. Howev

I’m using Tree to create a left side-bar menu which generally works. However I have not been able to figure out how to style the currently selected item so it shows some kind of highlight.

What I want to do is when a user clicks an item in the Tree or I call tree.select(item) I want to add a style called “selected” to that specific item in Tree. I also want to remove “selected” from the previous selected item (if any). I can then use css to change font color, etc for “selected”.

The problem is I can’t seem to figure out how to get the clicked/selected item component. If I have say Tree then of course ItemClickListener and SelectionListener both return events not the component holding the MyMenuItem item. Is there some means of getting the component of ItemClickListener event?

I’ve tried searching recursively via tree.getChildren() but I only see 1 Grid.Column despite there being 20+ items in Tree:

Component org.vaadin.tatu.Tree@51b86852 ID: mainSideMenu CLASSES: []
  Component com.vaadin.flow.component.html.Div@3175f01a ID: NONE CLASSES: []
     Component org.vaadin.tatu.Tree$CustomizedTreeGrid@294d05e3 ID: mainSideMenu CLASSES: [tree]

        Component com.vaadin.flow.component.grid.Grid$Column@705689ca ID: NONE CLASSES: []

Should I pursue something other than Tree for this side-bar component?

Using Vaadin 14.2.0.

Tree sets itself by default in single select mode, and the selected item is highlighted, see the picture

The highlight is defined by css custom property --_lumo-grid-selected-row-color
18280324.jpg