14 Events and application data flow

 

This chapter covers

  • Creating your own Custom Events versus using the DOM's native events
  • Event bubbling for the two event types, including using the “composed” option to bubble through the Shadow DOM
  • The WebComponentsReady event and the customElements.isDefined promise for handling timing
  • Using a centralized data model and an event bus to handle data flow throughout an application

As we get closer to the end of our Web Component journey together, there really isn't much left to cover in terms of Web Component features. That said, when contrasting what we've learned thus far in this book against a modern framework, Web Components may feel a little lacking in some areas.

14.1   Framework offerings

While Web Component features are now part of standard web specifications, things like data binding, routing, and model-view-controller (MVC) style application design patterns are not! To be honest, it would be kind of silly if they were. The web is a big place, and we're not all doing applications. Even if we were, application developers will typically pick the right design pattern for a specific project. Native features that favor certain ways of doing application development would likely not be a welcome addition.

14.2   Events

14.2.1   Native events and WebComponentsReady

14.2.2   When custom elements are defined

14.2.3   Custom Events

14.2.4   Custom Event bubbling

14.3   Passing events through Web Components

14.3.1   Native event propagation through the Shadow DOM

14.3.2   Custom Event propagation through the Shadow DOM

14.4   Separate your data

14.4.1   Model-view-controller

14.4.2   Local storage

14.4.3   Wiring UI to the data model

14.5   Exercise playback view

14.6   Passing events with an event bus

14.6.1   Static getter event types

14.6.2   Design patterns as suggestions

14.7   Summary

sitemap