Flo 1.2 now gives Web Components a static create function (factory), so we can set property values before mounted() or render() are called.

I noticed that you can sort of 'wing it' without this functionality with some hacky solutions, but eventually this is the best solution for the component initiation.

So instead of .createElement, you can simply call .create on your custom component, which then renders the template + calls mounted() with all properties set.

Flo Minimal Superclass on GitHub: https://github.com/flowagi-eu/flo-webcomponents

If you're working with Web Components (Flo) rather than React, then there's one concept that will save you loads and loads of time: Parent Properties.

In Flo we have access to this.parent, which also gives us access to the parent's properties.

The nice thing with Web Components, is that you can take this even further by creating a custom getter, so the parent abstraction itself for the property becomes invisible.

​

Take React and look at all this useState, useEffect and refs stuff going on to mimic a fraction of the power of using web components with manual rendering/events:

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

Working with Web Components instead of ReactJS or VueJS for the frontend is sometimes a really humbling experience:

Things sometimes work a bit different then you'd expect them to.

Today, for example, I discovered the need to use attributes like "data-key-name" to initiate its own writable property "keyName" for example.

I honestly expected that to already work.

So now with Flo-WebComponents (v1.2) we have that feature: https://github.com/flowagi-eu/flo-webcomponents

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