Wrap overlays of embedded components in shadow dom container

[rolfsmeds]

Description of the bug

Overlays opened from an embedded Flow UI are rendered outside of the shadow root into which the "inline" UI is rendered, and are thus in a different styling context from the rest of the UI. This has a couple of consequences:

1. Global CSS in the theme, which is injected into the shadow root, is not applied to the overlays*
2. Lumo modules like the Utility Classes are not loaded in the overlays
3. The parent page's CSS affects the styling of the overlays

(* With the new ::part() based theming in V24, all theming is now global CSS, which in practice means that application themes done in the V24 way are simply not applied to overlays at all.)

Problem 1 can be worked around by placing the styles in document.css instead, which is loaded into the parent page root, and was originally intended primarily for @font-face declarations that don't work in shadow roots, but that itself has a couple of issues:

1. This effectively means that virtually all global CSS must be in (or imported via) document.css instead
2. Those styles then risk conflicting with the parent page's CSS (which is why we don't do that by default)

Expected behavior

Any CSS that is loaded into the embedded UI is also available for overlays opened from it.

One way to fix this could be to wrap overlays of embedded content into its own shadow root.

Minimal reproducible example

I'll try to provide an example later.

Versions

• Vaadin / Flow version: 23

[werwolfberlin]

This is a minimal working example. There is the standalone app and also an embedding example. Both need to be run on the same webserver and same port, so please adjust the application.remoteDeployPath in the application.properties file in the embedded-test-example sub project to be able to link it to the right application.

There are 3 themes: pink (default), blue and lime. Lime is used for the embedded version. To see the issue, you can do following:

• click the question mark in the top which demonstrates the Dialog.
• open the combobox
• open the date picker

The standalone app will show the overlay with the blue theme variant, as it should do. The embedded version will show a pink overlay although it should be lime.

You can enhance the DialogContent class and the HomeViewImpl class when you want to have more content.

Also I demonstrated an issue with the app layout: when setting the theme variant in the main layout only the header and the navigation is affected, not the main part.

embedded-test.zip

[mshabarov]

This is might be related to the following enhancement https://github.com/vaadin/flow/issues/16001 in a way how we inject styles into document and shadow root.

[web-padawan]

This should no longer be an issue in Vaadin 25 where overlays are not teleported to the document body.