How to style ManuBar item (vaadin-menu-bar-button)?

Flow
1

I would like to style a specific menu bar item (not the whole menu bar), however a MenuItem is mapped to a vaadin-context-menu-item not a vaadin-menu-bar-button. Two use cases I have are adding an “icon” theme to a menu item and simulating the checked property on a MenuBarRootItem by changing it’s CSS style (or using the “primary” theme as a checked indicator). Changing the CSS on the vaadin-context-menu-item is unsifficient, because it style only the box around the text, not the whole button.

I know I can change the style / theme of ALL menu items in a MenuBar through a themable mixin but I want to apply it only to a single one.

From Java code menuItem.getElement().getParent() returns a fake div, not the containing vaadin-menu-bar-button so I am unable to change the class / theme of this element.
My questions are: How can I access the vaadin-menu-bar-button from Java?
Is there another way to change the style of a single root menu bar item?

Thanks for any advice and guidance.

2

I have found a workaround in this issue: https://github.com/vaadin/vaadin-menu-bar/issues/122#issuecomment-496397679

The downside is that this must be called on (I guess) each resetContent(), f.e. when the the visibility of an item is switched. Also all themes from the MenuBar must be retained too.

Something like this could be done:

var newVariant = String.join(" ", menuBar.getThemeName(), LUMO_ICON.getVariantName(), LUMO_PRIMARY.getVariantName());
menuItem.getElement().executeJs(
    "setTimeout(() => this.parentElement.setAttribute('" + ThemeListImpl.THEME_ATTRIBUTE_NAME + "', '" + newVariant + "'))"
);