It's not surprising, really: web components suck for having highly-customizable inputs.

1. You get HTML attributes to pass data in, or JavaScript properties. If you're in React, you'd just use a React component and skip web components. If you're in vanilla HTML, you can't just write HTML, you have to build the component with the DOM.

2. There's no real standard to making web components look the way you want them to. You can't just use CSS (you have to have the shadow root "adopt" the styles). Your point of "make it styleable" is actually one of web components' biggest weaknesses (IMO).

3. Web components are globally registered. React/Vue/Svelte/etc. components are objects that you use. You end up with a mess of making sure you registered all of the components you want before you use them (and not registering the ones you don't use) and hope no two packages you like use the same name.

> There's no real standard to making web components look the way you want them to. You can't just use CSS (you have to have the shadow root "adopt" the styles).

Not exactly. There’s the ::part() pseudo-element selector, which allows you to target an element in the shadow tree that has a matching part attribute.

https://developer.mozilla.org/en-US/docs/Web/CSS/::part