Sources

Sources wrap browser state within a reactive stream that’s then mapped to a state internally.

x-closest

x-closest gives you access to the element closest to display top within the selected elements:

Editor

  
Closest heading:

x-intersect

x-intersect triggers when the element is visible at the viewport. See IntersectionObserver documentation for available options.

Editor

  
Intersected at

In addition to the standard options, there’s an once flag that when set causes the state to be set only once. The behavior is useful for implementing patterns such as lazy loading.

Editor

  

The parent to target can also be the element itself:

Editor

  

x-interval

x-interval wraps setInterval and exposes its delay parameters. When triggered, it sets state.

Editor

  
Current time:

x-promise

It’s possible to use the standard fetch() API on top of x-promise to handle data requests:

Editor

  
  • -

In case there’s an error, then the Error object is emitted to error state:

Editor

  
  • -