Use Vaadin badge in lit element

Question

I'm trying to use vaadin badges in lit element.

The documentation is mentioning to "To use these classes in your application, enable them in your theme’s theme.json" but I don't have such a file so it is really confusing to me. Most of the documentation focuses on Java so I am guessing this is where the confusion comes from. So far I have only installed some components via NPM.

I tried to create a frontend/themes/common-theme/theme.json file anyways, but without success so far.

Here is how my element looks like at the moment :

import {LitElement, html} from 'lit';

import '@vaadin/vertical-layout';
import '@vaadin/horizontal-layout';

import '@vaadin/vaadin-lumo-styles/badge.js';

export class PaymentLink extends LitElement {
    static properties = {
        version: {},
        link : { Object}
    };

    constructor() {
        super();
    }

    render() {
        return html`
            <vaadin-horizontal-layout>
                <a href="${this.link.url}">${this.link.id}</a>
                <span theme="badge">Pending</span>
            </vaadin-horizontal-layout>
    `;
    }

}
customElements.define('payment-link', PaymentLink);

Could someone please show me the light? Here is a stackblitz example : https://stackblitz.com/edit/lit-element-jjzdpa?file=src/index.js

Answer 1

The @vaadin/vaadin-lumo-styles/badge.js module only exports the styles, just importing it will not automatically create a style tag with the respective CSS. With Vaadin Flow or Hilla applications that can done automatically by configuring said theme JSON file.

If you want to use badge standalone in a Lit app, the best approach is probably to add the badge styles to the styles of your root / application Lit component:

import { badge } from '@vaadin/vaadin-lumo-styles/badge.js';

class MyLitApp extends LitElement {
  static get styles() {
    return [badge, /* ...other app styles */]
  }
}

Note that if one of your components using badge uses a shadow root, then you need to add the badge styles to that component in the same manner.