Dropdown to work like desktop menus

[mblinsitu]

I am new to Shoelace. I would like to modify or extend Dropdown / Menu / MenuItem to support selecting items by [mousedown]-[mousemove to item]-[mouseup] as well as the current [click]-[move to item]-[click]. This is how the menus work on MacOS (among others).

I looked into extending the existing component classes, but I see a number of private methods that would be useful but cannot be called by subclasses. Of course, I can copy the code and modify it, but it's less than ideal.

Also, it looks like I will not be able to bind this new class to the <sl-dropdown> tag so as to replace the one from the library.

Any thoughts/recommendations? More generally, what is the "policy" and practice about extending existing components?
Thanks

[claviska]

Shoelace components weren't designed to be subclasses. It's technically possible, but many components will break due to tag name references in CSS, query selectors, etc.

Opening up the internal APIs of each component isn't an impossibility, but it's definitely too soon and not where our focus is at the moment. Pretty much every component would need to be revisited to achieve this well and, if we don't get something right, publicizing those APIs will mean we're stuck with them until the next major version.

When possible, I suggest composition over extending. If there's a good use case for something that can't be done with a component today, it's usually either a missing feature or an improper use of the component.

We're very receptive to feedback and suggestions for ideas, of course :)

[mblinsitu]

Thank you Cory, this is a fair rationale.

I managed to get pretty much what I wanted without touching the existing components, by adding a few event listeners.
Now I realize that the best approach, rather than extending/modifying the existing components, would be to create a new menubar component, similar to button-group but that manages the interaction with the dropdowns the way I want.

I'll post if/when I get something worth showing.