Docs

Docs

Styling Embedded Components

A guide on how to style embedded components in Vaadin applications.

Custom Flow UI components, or even entire Flow views or applications, can be embedded into other web pages by exporting them as server-side generated Web Components.

Because these embedded components are rendered inside shadow DOM wrappers, their styles need to be loaded in a different way than those of Vaadin applications: by applying the @CssImport annotation to the component’s root class (the class that extends WebComponentExporter) to load a stylesheet from the src/main/frontend/ folder.

Source code
[project root]
└── src
    └── main
        └── frontend
            └── my-embeddable-component.css
Source code
Java
@CssImport("my-embeddable-component.css")
public class MyEmbeddableComponent extends WebComponentExporter<Div> {
 ...
}
Source code
src/main/frontend/my-embeddable-component.css
/* Loading Aura theme into the exported component */
@import "@vaadin/aura/aura.css";

/* Custom CSS for the embedded component */
:host {
  ...
}

The Lumo or Aura theme can be applied to the component by using an @import rule that references the theme’s npm package path:

  • Aura: @vaadin/aura/aura.css

  • Lumo: @vaadin/vaadin-lumo-styles/lumo.css

If the embedded component is also used as a normal Flow component in a Flow application, it is recommended to load all styles for the application with @CssImport (from the src/main/frontend/ folder) instead of the usual way with @StyleSheet, in order to avoid conflicts and duplication between styles loaded by the component and the application.

dcc029f6-fe27-4721-a4fc-0820968fa369