[Vaadin 19] Theming Embedded Applications with Custom Theme- theme is broken when embeded component opens Dialog

Description of the bug

In my app I have a lot of pseudo-components which extend vaadin components and add some global styling (background, layout, borders, paddings etc) by css. I have additionally a visual component which is exported via WebComponentExporter and embeded as web component in some static html/servlet. Because the content of a web component generated by WebComponentExporter was moved to the shadow DOM (from Vaadin 14.2) to get it work in Vaadin 19 I’ve used the new Custom Theme mechanism. It’s great and it generally works but unfortunately doesn’t work in one situation. I’ve created my Custom Theme (properly) and add @Theme annotation to AppShellConfigurator and WebComponentExporter component.

I’ve prepared a simple test app: in simple visual component I add one of my pseudo-component (with its styling). Additionally, from this component I can open a Dialog via a button. This Dialog also has this pseudo-component added.

What works:
When I route to my component directly (as a View) everything works. My pseudo-components added directly in the View and even in the Dialog are styled properly.

What doesn’t work: When the same visual component is exported via WebComponentExporter (of course with @Theme annotation) and embedded in some static html/servlet, my pseudo-component is styled properly only in web component. But when I open a Dialog with second pseudo-component styling is gone.

It’s because Dialog is openend as a separate div (component) in the body of static html/servlet in which my Theme is not visible. Do I have to add to all my pseudo-components @CssImport annotation? But why if the application works without it when I’m using @Theme annotation in AppShellConfigurator 😃 Or is there any other way?

Minimal reproducible example

This is my simple test app (based on the Vaadin 19 example taken from Vaadin site) : my-app.zip

Versions:

- Vaadin / Flow version: 19.0.0.beta4

[darmro]

Thank you @taefi

• It is recommended to have your styles for the views under themes/your-theme folder and then you can import them through @Import statements in the styles.css file (which is imported by default). Then, no need to use @ImportCss annotation in your views.

that’s exactly what I have 😃 I dont have @ImportCss in my pseudo-components and any views. All my styling is done by @Theme annotation and all css are under themes/your-theme folder.

• “documentCss” as the key inside theme.json is designed to be used when you want to use styles for the embedded components:

  "documentCss": ["@fortawesome/fontawesome-free/css/all.css"]
}

I meant document.css which is located in themes/your-theme folder. This file is a CSS that is always applied to the root of the page, not only for embedded apps. So by adding all my global styles to this document.css I have a situation in my normal vaadin app (normal Views, not emeded widgets), that my global styles are applied to the application twice, by @Theme annotation and by document.css. Probably it is not a problem in general but it is weird 😉

[rolfsmeds]

I think our best bet is to wait for browser support for https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog, and then refactor vaadin-dialog based on that. Really just WebKit dragging their feet at this point, as Chrome and Edge already have out-of-the-box support and FF has it behind a flag.