Meaning of "UI.getElement()" in context of Vaadin-as-WebComponent

Flow
1

Hey everybody. When I run UI.getCurrent() in a webcomponent, I get a WebComponentUI. When I call getElement() on that UI, I get such an Element <body><div></div></body> (according to toString()), which is the same as with a “regular” UI.

When I call UI.getCurrent().element.executeJs("console.warn(this)"), the browser shows the body-Element in both cases. Is this intended behaviour? The documentation from the UI class says

A UI may either represent an entire browser window (or tab) or some part of a html page where a Vaadin application is embedded.

From this, I’d expect that WebComponentUi#getElement returns something like <my-webcomponent>…

2

And maybe another point… what’s UI#wrapperElement? I mean, in a “regular” application, it is the flow-container-xxx-element, that I can clearly see in the browser’s DOM. But in a web component?

3

Just to warm this up…

Since UI.getCurrent().getElement() yields , I cannot do UI.getCurrent().add(SomeFixedPositionComponent()), because the resulting DOM looks like this:

And the styling of my-webcomponent does not influence the other component. One exampe for this is the Vaadin-Dialog which is added to the UI and thus not inside the webcomponent.