What makes custom elements good is inrerop. I can use them in react, Vue, angular, svelte, solid, or just plain ol' server rendered html. I can switch out the internals entirely for a WC lib, or not, with nobody knowing or caring.

This is a unique advantage to WCs. And it's such a compelling advantage that it makes almost all the downsides tolerable. At least if you are in a position where your component might be used in many places. Design Systems are a good example. The consumer can be any app, built on any technology.

And there are plenty of downsides. But they are mostly felt by the author, not the consumer. Similar to how TS libs can be very complex to author because of type level gymnastics, but when done right are easy to consume.

(I do not push them heavily, but I can appreciate strengths and weaknesses of all tools)

▲

troupo 10 hours ago | parent | next [-]

> At least if you are in a position where your component might be used in many places.

I think someone once called them leaf components, and on this I agree.

▲

WickyNilliams 9 hours ago | parent [-]

They don't need to be leaf components to still have this strength. I've worked with design systems which have a <my-layout> component near the root which defines sidebar, header etc slots. This still works nicely with react, Vue etc

But I agree they tend to be better suited as "leafier" components

▲

troupo 9 hours ago | parent [-]

> I've worked with design systems which have a <my-layout> component near the root which defines sidebar, header etc slots.

Funnily enough this is exactly what original proposal of web components was against :)

	▲	WickyNilliams 9 hours ago \| parent [-]
		Honestly I couldn't care less what the original proposal said! Things evolve. Utility is found in unforeseen places. That's the nature of ~everything. Personally I'm not a fan of that kind of component but not aligning with some original, preordained vision is a minor nit

▲

singpolyma3 8 hours ago | parent | prev [-]

You know what else can be used in all these contexts? Defined HTML elements