web-components
web-components copied to clipboard
Move menu-bar-buttons into a slot
Describe your motivation
The menu-bar-buttons inside vaadin-menu-bar are currently in the component's shadow DOM. This presents some challenges for ::part() based styling:
- Need to expose the buttons' various parts (prefix, label, suffix) through exportparts
- No styling access to the contents (e.g. icons) of the parts mentioned above (only way to do this without shadow dom css injection)
- Buttons with theme names applied to them (individually) cannot be styled with
::part()
Describe the solution you'd like
Introduce a slot in vaadin-menu-bar and move the buttons there, so that they can be styled directly as light-DOM elements.
Describe alternatives you've considered
I suppose we could reflect theme names applied to individual MenuBarButtons as part names automatically? (This would still not make prefix/suffix slot contents styleable however)
Additional context
This will introduce a breaking change to custom styled menubars – a fairly common occurrence in Vaadin applications. Consider providing an opt-out to migrators from earlier versions using a feature flag if feasible?