I spent days building this little perfect dropdown select thing, that is a hundreds lines of code and even more docs explaining what the hell is going on. Someone wasted the same amount of time before me. Someone else spent a lot of time before them. And so on.
I wish we have had more browser native implementations including some notion of virtual lists so the browser would not choke when rendering a lot of content.
---
Eventually, this would be same as border-radius. It will get implemented and we'll forget about that forever.
I thought the promise of Web Components was also about this: make a control once, make it styleable, let everyone reuse it.
I wonder why is this not happening widely.
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.
Which is honestly kind of wild. You can't, as far as I know, customize pseudoelements of the part. You can't customize them in context (no striped table rows). You kind of have to just pray that custom properties work like you hope.
Because web components themselves break even in the expected situations? And need 20+ new spec to make them work? And because they are neither low level enough nor high level enough to be useful for the use case you described?
Web components are pretty terrible, and do not work as you would expect them to. Take this, for example
<some-element>
<input type="text">
</some-element>
Now take this:
<some-element>
<textarea>…</textarea>
</some-element>
Now take this:
<some-element>
<select>
<option>…</option>
</select>
</some-element>
Web components are full of all of these random footguns.
> Web components can only style their immediate children.
This isn’t true at all. You’re doing something incorrect when creating your shadow root or adding your styles. (“Web components” aren’t really a thing - it’s a marketing term for a set of technologies - so I assume that you’re talking about custom elements with shadow roots here.)
Refer to example 4 in the CSS Scoping specification:
> It will not select #three (no slot attribute) nor #four (only direct children of a shadow host can be assigned to a slot).
— https://drafts.csswg.org/css-scoping/#example-7cc70c2d
I’m talking about the #four case.
Alternatively, refer to the issue that was opened in the web components issue tracker here:
> > you can only select a direct item within the slot
> That is by design. See #331 for details.
> We don't have a plan to support an arbitrary selector for ::slotted.
— https://github.com/WICG/webcomponents/issues/594#issuecommen...
> “Web components” aren’t really a thing
This is an empty nitpick. The people writing the specs call them web components, the people implementing them call them web components, the people writing them call them web components. There is nothing wrong with calling them web components.
> I assume that you’re talking about custom elements with shadow roots here.
You don’t have to assume anything. I explicitly said that it constructed a shadow DOM.
Yeah, slotted elements have to be direct children, but you can select any descendant in CSS. That text is only referring to the ::slotted() pseudo-element.