<DropDown>

And or

<EnhancedDropdown disableEnhance={isEnhanced}>

And or

<MultiSelectWithAutocompleteAndSearchBar onlySingleSelectionAllowed={true}>.

Then you can compose all of those together into:

<ThisComponentMakesSenseToOnlyMeDropDown show={isDropdown && !Carousel && showCarousel} totallyDifferentData={totallyDifferentData} enhanceWith={<EnhancedDropdown>} replaceWith={<CarouselWithNoDropDown> >

^ That’s where all the complexity is coming from. I will not even attempt to demonstrate my point by adding context and global stores into this.

Small bit of bitterness:

Then you make a nice little storybook component, and a jest snapshot to show that this is a nice ‘testable’ component, you know, like really dot your I’s and cross your T’s.

Back to my point:

This is powerful in the purest sense, as it’s super flexible, but also powerful in a way that can create insane amounts of complexity with different mindsets contributing. Not everyone sees a regular <DropDown>, some see all kinds of things.

I think a lot of the fragility (perhaps the better word is instability) comes from this power (chaotic, out of control power). I hope web components at the very least creates a standard list of UI components (the browser doesn’t even have a default modal yet, still rolling with alert(), and if you leave it to the wider community to make it, we will end up with <AbstractModal>).

That the developer experience also doesn't work is just an effect of the real-world, where people will end up using stuff outside of the small designated bucket of things that somebody attempts to keep compatible with each other.