web components
A comment @n1xx1 made over in #development-basics (https://discord.com/channels/732325252788387980/754127569246355477/883296860092117032) got me thinking about something -- would there be any value to a shared set of UI components built on the Web Components (https://developer.mozilla.org/en-US/docs/Web/Web_Components) spec? With or without something like
lit. Kind of like our own little design system to take care of tasks like accordions, pagination, etc.Web Components | MDN
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
10 Replies
Let's thread this
I'm intrigued but skeptical
What concerns do you have?
I come from react land for my day job and somehow despite my best efforts every time I try to make a component library the exceptions outnumber the commonalities.
My skeptical side says "very few people will use this because every one will have a different use case"
However, I'm all for working together and love the idea of making a library module which provides ui patterns ready made for people to use (and core to consider implementing perhaps)
Accordions for instance are a great example.
Imo if I need one I use
details elements, but my use cases are never very complex.
Core has at least 2 cases where it used them, if you include 5e
They're thus a pretty ubiquitous pattern that everyone has probably done a little differently
Standardizing that work would rockThat's where my head is -- standardization of function, even if it's not standardization of style.
Yeah that makes a lot of sense
I've never used web components, this would be a fun way to see their potential
My day job until recently was to build this kind of component library, using Web Components. The Shadow DOM stuff is a little different to get your head around at first, but once you understand how to work with it, it's not too bad.
What are some prime candidates for this sort of pattern that either:
A) Core does not handle
B) You feel core does not handle sufficiently
?
I'd prefer to focus on A before B, but that's obviously just me
You mention pagination, it's a good classic example but I don't think I've seen any examples of it in foundry
Accordions are the biggest thing I can think of.
Otherwise most patterns (that I've seen in foundry) are covered with something common already. For things that core kind of had but not really, it would be neater to extend core rather than seek to replace.
E.g. "free floating menu" is a pattern that's gaining popularity. These are Applications at their heart, but with a common set of changes that would be cool to standardize.
I should preface this with, I'm pretty darn green to the Foundry ecosystem, and I don't know what the norms are in UI development in this ecosystem. That said...
* Accordions
* Pagination
* Filterable/sortable tables
* Tab groups that don't rely on any JS-level configuration
* Dynamic lists of data structures (example: having n+0 items in a list that can contain a character class feature and the level it's unlocked at)
There are a lot of other little niceties, like icon buttons, multiselects that display their output in a relatively nice form, typeaheads, stuff like that, that I'd wonder about bringing in, too.
As well as a set of CSS vars to control styling all of this.
Oh autocomplete selects is a good call!
I'm not convinced about tab groups as core does have stuff for that.
Filterable anything is another good call, not just tables but lists too
In your shoes I'd start with accordions and autocomplete/multi selects; as those are the two biggest missing-from-core things in your list
Web components smells like exactly the kind of tech Atro would be interested in using as well, so if be fun to show off how powerful they can be
Heck yeah. I'll get something spun up after work today. I could probably use a break from this OSR system I'm porting in 😅