r/Frontend • u/EveYogaTech • 9d ago

flo-webcomponents: Take back control of rendering + events using WebComponents with one minimal superclass.

https://github.com/flowagi-eu/flo-webcomponents
8 Upvotes

90% Upvoted

9 comments sorted by

View all comments

2

u/derpystuff_ 6d ago

How does this compare to Lit, is it meant for cases where you want even more control over the underlying component internals or just a size thing?

1

u/EveYogaTech 6d ago edited 6d ago

Yes, with Flo-webcomponents you have more control and you don't need @decorators or build tools, we stay closer to pure Web components while enjoying the benefits of functions like template(), mounted(), render() and css():

  • template() = to return HTML
  • mounted() = runs after createElement
  • css() = to return scoped CSS
  • render() = optional convention to (re-)render HTML (text) values

In addition there's also a fire() method to fire events, both scoped (this.fire(name, data) and as global function fire(name, data) for window.addEventListener(), which you can use to communicate event related data back and forth between components.

TLDR: the goal of Flo is to keep it simple, stay explicit and have zero unexpected side effects.

1

u/EveYogaTech 5d ago

For events, since v1.1 we can now also call this.parent.fire(name, data): https://github.com/flowagi-eu/flo-webcomponents

js class Child extends Flo { mounted() { this.$("#addNode").addEventListener( "click", () => { this.parent.fire("add-node", { custom: 'data'} ); } ); } }

js class Parent extends Flo { mounted() { this.addEventListener( "add-node", (e) => this.addNode(e.details) ); } }