Using the badge "component" in a custom component (V25)

General
1

I currently have a custom Lit-based Web Component using Vaadin’s badge “component”. I think it so far worked via this snippet:

  protected createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

applyTheme was imported from Frontend/generated/theme.

In Vaadin 25, it seems applyTheme is no longer available. Is there any alternative to inject or import the badge-related styles into the Web Component?

As I understand, it’s the intention to introduce a proper Badge component at some point, so it’s probably not worth it to put a lot of effort into fixing this. But maybe there’s an easy fix?

2

You might wanna try this fix: ensure Lumo CSS is injected into BigDecimalField (#8351) · vaadin/flow-components@9759bf3 · GitHub

3

Hmm, even after adding the LumoInjectionMixin that doesn’t seem to do anything.
I also tried

static get lumoInjector() {
  return { ...super.lumoInjector, includeBaseStyles: true };
}

which I’ve seen in other Vaadin components.

4

As a sanity check, does your component need to use a shadow root and do you need its styles to be isolated from the rest of the application? Shadow roots are usually more useful when developing component libraries to use in multiple apps. If the component is only used in this one single app, then you could consider just rendering the component contents into the light DOM so that you can just load regular stylesheets without needing to inject styles with Javascript. With Lit that would be:

  protected createRenderRoot() {
    return this;
  }
5

It was indeed intended as a standalone/reusable component.
Either way, removing the shadow root would unfortunately break its slots.
The component is not important. It was mainly a proof of concept, but never got much use beyond that. And all of the learnings have been also applied to other components in the meantime. So I don’t even have to keep it around for reference. So if there’s no easy fix that’s totally fine.

6

If you only need the badge.css - you might be able to just inject that css file from lumo.

Personally I would just copy paste those 10-15 lines of css into the component. Especially with the knowledge that there is the possibility for a real badge component that would make this obsolete

7

I made standalone Badge web component for Vaadin 23/24, you can see example here for food for thought.

8

Unfortunately, the interesting part (importing badge.js) is also something that doesn’t work anymore in Vaadin 25. I tried to import the CSS file instead (which I’ve seen in other examples), but that doesn’t work either.

9

When using Lumo theme it should work, I recall badge styles are not included in Aura (yet).

10

Yes, I was using the Lumo theme.
But while reproducing the error (I got when trying to import the CSS file) to show here, I stumbled upon something else that actually does work:

import badge from '@vaadin/vaadin-lumo-styles/src/global/badge.css?inline';

...

  static styles = [badge, css`
    ...
  `];
1 Like