What if instead of buying into an entire UI framework we could buy into just the bits that made sense for the features/application we were tasked with shipping?

What if instead of looking for the best X component for Y framework we could just find the best X component knowing it would work in whatever context we were working in?

What if whenever we learned of a new technique we could pull the old version out of our app and replace it instead of replacing the whole app?

Oh yea, #webComponents!

@westbrook I want this, but every time I look, all the lists of components are tied to various frameworks like shoelace etc.

E.g., show me a nice vanilla autocomplete webcomponent?

A vanilla "tag" component?

Drag and drop sort?

These all seem ripe for drop-in vanilla #webcomponents right? But why can't I find them?

@jamienk I think you're hitting on various important points here:

> why can't I find them?
The #webComponentCG has attempted to relaunch webcomponents.org, be the volunteers were all quite busy...building #webComponents instead 🙈

> various frameworks
I'm not sure I'd call #shoelace tied to a framework, but it is a family of components. Often building a family offsets the cost of building one component in a web ecosystem that's been prioritizing CSS improvements over DOM primitives, lately

1/x

@jamienk then you get into the complexities of components that interoperate:

> autocomplete? drag and drop sort?
For these to work no matter where they are consumed, there needs to be a broadly agreed-upon set of patterns that power interoperability beyond web specs. The #webComponentsCG is working on this via https://github.com/webcomponents-cg/community-protocols The newly proposed "Slottable Request" could power things where data/state is held in a consumed component but powered by DOM rendered by the parent context.

2/x

GitHub - webcomponents-cg/community-protocols: Cross-component coordination protocols

Cross-component coordination protocols. Contribute to webcomponents-cg/community-protocols development by creating an account on GitHub.

GitHub

@jamienk With all of this in mind, my OP is certainly still a good bit aspirational, but they are what's possible with #webComponents.

Already, I see the wins when custom elements of a specific family can easily be dropped into apps structured in that "language" but built with different frameworks. Seeing the same UI ship in #Vue or #React or #Svelts, etc. is a big first step.

The #webComponentsCG constantly working on the next steps at https://discord.gg/YmrNQ4rYJz come join the conversation!

3/3

Join the Web Components Discord Server!

Check out the Web Components community on Discord - hang out with 473 other members and enjoy free voice and text chat.

Discord
@westbrook Thanks for all this. I want the dream :)