MenuBar - access vaadin-menu-bar-button

As far as I understood, MenuBar component wraps menu items inside a button: vaadin-menu-bar-button

Is there any way to access the menu button via element API somehow?

MenuBar menuBar = new MenuBar();
MenuItem item1 = menuBar.addItem("Menu Item 1");

item1.getElement().getStyle().set("border", "1px dashed teal");     // vaadin-context-menu-item
menuBar.getElement().getStyle().set("border", "1px solid gold");    // vaadin-menu-bar

// how to access vaadin-menu-bar-button ???


No it’s not possible to get the button via element API.

However, if your goal is to style the buttons differently, that would be achievable by adding your own style sheet using [@CssImport]
( The following code has not been tested, but should only bring the point across.

@CssImport(value = "./styles/myMenuBarStyles.css", themeFor = "vaadin-menu-bar")
public class MainView ..... {
<!-- myMenuBarStyles.css: --> 
	border: 1px dashed teal;

[Styling Documentation]

@Kaspar Scherrer: thanks!
This way, how to style the menu buttons individually?

The way you described helps me to have a common style for all the menu items, but what if I would like to have different styles for the first menu item than the others?