Ancestors

Toot

Written by Jason Garber on 2024-11-21 at 22:14

I’m looking for good examples of well-crafted nested #WebComponents. Something along the lines of a parent component that’s responsible for adding and removing child components.

Suppose the related question is where’s the canonical “to-do” app for standards-based Web Components?

=> More informations about this toot | More toots from jgarber@mastodon.cc

Descendants

Written by Sara Joy :happy_pepper: on 2024-11-21 at 22:43

@jgarber paging @cferdinandi

=> More informations about this toot | More toots from sarajw@front-end.social

Written by Chris Ferdinandi ⚓️ on 2024-11-21 at 23:11

@jgarber I recently built a component like this for a client, but the parent didn't add/remove stuff. It mostly communicated with child elements and vice-versa using custom events.

The pattern you're describing feels very "React-like," and frankly, not how I normally recommend approaching Web Components. I could see situations where it would be useful, though!

=> More informations about this toot | More toots from cferdinandi@mastodon.social

Written by Jason Garber on 2024-11-21 at 23:15

@cferdinandi I’m hoping I didn’t accidentally prescribe a solution in my original request for examples!

Any examples of parent/child components interplaying and communicating would be useful.

(I very intentionally have near zero experience with React, so any similarity to how it functions is purely coincidence. 😂)

=> More informations about this toot | More toots from jgarber@mastodon.cc

Written by Chris Ferdinandi ⚓️ on 2024-11-22 at 00:01

@jgarber let me see if I can dig up some source code!

=> More informations about this toot | More toots from cferdinandi@mastodon.social

Written by Jared “Indie Social Web” White on 2024-11-21 at 23:25

@jgarber So this is pre-release, but I have an example todo app in the works using a wrapper I'm developing around vanilla web components: https://github.com/heartml/heartml/blob/main/example/todoapp.html

The main "secret sauce" is simply that I'm using Signals (the library from Preact) under the hood to track state. This makes computing things like number of completed items, remaining items, etc. pretty simple, as well as targeted DOM updates (which you don't see here explicitly because my wrapper does it automatically).

=> More informations about this toot | More toots from jaredwhite@indieweb.social