Embedding Vaadin App, UI and web-components

Hey, it’s me again… cough

I just had some quality time in the debugger and saw that the UI is created by the WebComponent exporter.

So for example:

  • our customer wants to integrate our app in some single page app
  • they include which loads “path/to/web-component-bootstrap.js”
  • at this point, the UI object is created

If is included in some “sub page”, then each time it is included in the currently visible DOM, it uses the same UI instance. For me this feels very strange. I’d expect that every -occurrence corresponds to a different UI-instance.

To be fair, I did not check what happens when I have two on the page at the same time, but I’d guess that it is the same.

Can someone explain to me why this is how it is?

The UI abstraction is a bit weird when it comes to embedded web components. The UI actually represents the browser tab, i.e. the window instance in the browser with aspects such as the page title and what scripts have been loaded on the page. This originates from how “regular” Flow UIs work.

I would in general encourage to not associate any application state with the UI instance but instead use a top-level main layout for regular UIs and the web component instance for exported web components.

Thanks, that hint gives an idea, how to get somewhere.

It is really unfortunate, that things like @UIScope are giving users more headache this way: this scope could still be used for webcomponents, but not necessarily.

And when associating application state with the web component instance, we cannot use the onDetatch listener, as this is only called when the tab is left (if I got this correctly)