Integration of Fore, Vaadim router and webcomponents

[pherk]

I'm needing some help ;-)
I have compiled a simple routing test app with login on the basis of demo/auth.html.
My problem: the login is displayed but not initialized by Fore, even if I imported the widgets before Fore processing is kicked off.
The complete code is too much to include here.
But, the structure is simple:

• fx-fore sits in the main index.html as 'chef of menue'
• vaadin-router loads the web components in a wrapper div by its own ('outlet'), so after loading

<div id="wrapper">
  <fx-fore>
    <main id="outlet">
      <nabu-app>
        <nabu-login>   
...
  </fx-fore>
</div>
<script type="module" src="./out-tsc/src/index.js"></script>
<script type="module" src="./assets/js/fore-debug.js"></script>

• the fore processing runs without error

my observations in comparison to 'demo/auth.html':

• refresh fx-fore.js:181: is empty, no refreshed widgets
• ########## modelItems fore-control.js:425: array is empty

What is the problem? shadowRoot vs innerHtml? race condition?
If I register a plain js component in 'index.html' and set the innerHtml with the same fx-controls, it plays well.
Is there a way to register (and de-register) web components in the Fore machinery?

[pherk]

now on github: https://github.com/pherk/router-test
to clarify:

• with innerHtml I meant the normal innerHtml not the innerHtml of shadowRoot
• web components which are using fx elements in the shadowDOM

[JoernT]

Ah - now - after looking into the your login i see what you're trying...

You're creating the UI of login in shadowDOM which is not traversed by Fore. You have to put all children you want Fore 'to see' into the lightDOM (please lets talk about 'lightDOM' and 'shadowDOM' - avoids a lot of misunderstandings).

You're trying to build 'macro' components and that for sure a valid idea which i personally haven't explored or even thought about a lot. You could just put your template output to lightDOM (renderRoot) and see what happens. Would be interested to hear.

However there's an alternative approach which avoids the overhead of creating web components just for the purpose of markup composition.

There is already a discussion on this board about that and IMO is the more attractive approach to follow.

Essentially it would allow you to just put your template in html and link it within a Fore like this:

<fx-control href="login.html" ref="login">...

and login.html containing your markup.

However there are some obstacles to overcome before we're there as this needs some serious refactoring and in parts re-design. Event-handling, scoping, CSS encapsulation etc. need to be revisited. This project will take some time and we're thinking about setting up donations for such things as we don't have any revenue from Fore so far - it's an offering to the community and hopefully it will be useful for people that respect the effort going into it.

[pherk]

Regrettably, I cannot offer any significant amount of donation.
I have put the template in lightDOM as you proposed. Principally it works with LitElement too but the components styles will not be applied and nested components (app->login) didn't show up.
I had read your discussion about complex forms in summer but missed your comment from Sep 23.
I will have to think over my approach since my old betterform app with many subforms is too complex to put it into one file.
All the best.

[JoernT]

any chance to see that approach in code? that styling stuff can probably be overcome.

[JoernT]

For sure a way to compose complex controls is needed. But if we could even have complete Fore components in itself it would 'inherit' all the functionality of Fore to return the desired result to the outermost Fore.