> Markdown version of [Styling Embedded Components](https://vaadin.com/docs/next/styling/advanced/embedded-components). Section index: [llms.txt](https://vaadin.com/docs/next/styling/llms.txt)

# Styling Embedded Components

Custom Flow UI components, or even entire Flow views or applications, can be [embedded](https://vaadin.com/docs/next/flow/integrations/embedding.md) 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.

```
[project root]
└── src
    └── main
        └── frontend
            └── my-embeddable-component.css
```

```java
@CssImport("my-embeddable-component.css")
public class MyEmbeddableComponent extends WebComponentExporter<Div> {
 ...
}
```

src/main/frontend/my-embeddable-component.css

```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, you should load all styles for the application with `@CssImport` (from the `src/main/frontend/` folder) instead of the usual way with `@StyleSheet`, to avoid conflicts and duplication between styles loaded by the component and the application.

`dcc029f6-fe27-4721-a4fc-0820968fa369`