Recent searches
Search options
Administered by:
How would you share state between Web Components? - Go Make Things:
https://gomakethings.com/how-would-you-share-state-between-web-components/
gomakethings.comHow would you share state between Web Components?Yesterday, I had an interesting chat with a friend about how I would share state between Web Components, and get them to talk to each other in a web app.
Today, let’s explore what that might look like!
An ecommerce platform An example I like to use for this kind of thing is an ecommerce platform with a few interconnected components.
You might have a <cart-link> Web Component that displays a link to the checkout page, with the number of items in the cart as it’s text.
@alcinnz I do something similar, relying solely on custom events to broadcast changes that other components might need to sync to. Each event has three bits in its payload:
* the new value
* the Group ID of the elements that the event is intended for
* the ID of the broadcaster, so it can ignore what it itself said
I find it works like a charm, as I use web components sparingly in HTML templates.
@alcinnz Good article. Hopefully we'll see more adoption of web components; native JS support for signals (https://github.com/tc39/proposal-signals) could help with that.