[context-menu] Menu items do not follow public styling API conventions

[jouni]

The following selectors should be considered internal implementation details (e.g. ::slotted(.vaadin-menu-item)), yet they apply styles which belong to a theme:

https://github.com/vaadin/vaadin-context-menu/blob/f0db00898cdaca632127afdf024b88152d60e184/theme/lumo/vaadin-context-menu-styles.html#L39-L81

https://github.com/vaadin/vaadin-context-menu/blob/f0db00898cdaca632127afdf024b88152d60e184/theme/lumo/vaadin-context-menu-styles.html#L89-L104

Any custom theme that wants to for example customize the sub-menu indicator (content: var(--lumo-icons-angle-right);) will need to override an unsupported selector :host(.vaadin-menu-item.vaadin-context-menu-parent-item)::after, which is not guaranteed to be backwards compatible.

[rolfsmeds]

Not sure I ge this – why is the .vaadin-menu-item classname applied and used in those selectors?

[jouni]

I assume in order to target any kind of vaadin-*-item, and not need to explicitly list all the different types.

[jouni]

(and I should try to remember to not link to source lines in master, because those will inevitably change). Edit: updated, linked to the lines at the time of creating this issue.

[web-padawan]

These class names were added in https://github.com/vaadin/vaadin-context-menu/pull/200 where vaadin-item element was used. Later on, we changed to use vaadin-context-menu-item in https://github.com/vaadin/vaadin-context-menu/pull/213 but did not remove those class names.

Let's fix this in V24 by removing usage of .vaadin-menu-item as it's no longer needed.