Production build doesn't look similar to dev mode

Hello !

I’m currently building an app using the latest version 23.2.11
For one of my view, I’m using the Details widget to display some data, all Details are rendered in a custom LitElement.

Here is an example:

import {html, LitElement} from "lit";
import {customElement} from 'lit/decorators.js';

@customElement('gifts-details')
export class GiftsDetails extends LitElement {
    createRenderRoot() {
        // Do not use a shadow root
        return this;
    }

    render() {
        return html
            `
                <vaadin-details theme="reverse filled">
                    <div slot="summary">
                        <span><i class="las la-gift"></i> Gifts</span>
                        <span theme="badge contrast pill small" id="count">0</span>
                    </div>
                    <vaadin-grid id="grid" theme="compact"></vaadin-grid>
                </vaadin-details>
            `;
    }
}

Please note the defined themes: reverse and filled

In dev mode, no issue, the layout is displayed as expected (watch “dev” picture)
But in production mode, the layout is broken (watch “prod” picture)
image.png
prod.png

image.png

In production, Vaadin will take only the components explicitly used in the Java code. Maybe the vaadin-details is not used in your application in Java. You can add an annotation on your component @Uses(Details.class).

Or a missing import in your ts file

in my ts file I have to import all vaadin components then?

Ok, it was indeed the issue

Thank for your help!