ThemableMixin not working

I’ve created a custom component using ThemableMixin in Hilla 2:

frontend/components/custom-comp.ts:

import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
const styles = css`:host { color: orange; }`;
registerStyles('custom-comp', styles, { moduleId: 'custom-comp-styles' });
@customElement('custom-comp')
export class CustomComp extends ThemableMixin(LitElement) {
  static get is() { return 'custom-comp'; }
  static get styles() { return styles; }
  render() { return html`<span>Custom Component</span>`; }
}

Trying to override some style in the components folder:

frontend/themes/my-app/components/custom-comp.css:

:host { color: blue; }

Still the text is rendered in orange, not blue. - What am I missing?

You could take a look to GitHub - TatuLund/ColorPicker: ColorPicker component for Vaadin 23.1 and newer versions or GitHub - TatuLund/TabSheet: A simple TabSheet component for Vaadin 23 implement using LitElement based web component The both components implement ThemableMixin and works.

@yummy-rhino , thanks for looking into this. I’ve read your article and checked out your TabSheet repo. It works as expected, but from my (limited) perspective this is not a Hilla v2 application, or is it?

No, it is not Hilla app, but the web component part, the tab-sheet should work in Hilla project as is.

Yeah, I guess this “should” is my problem :sweat_smile: . We’ve copied the web component part to a Hilla 2 project, and it doesn’t work there :man_shrugging: .

Check browser console logs

Check this TabSheet/src/main/resources/META-INF/resources/frontend/tab-sheet.ts at master · TatuLund/TabSheet · GitHub

Ah, the browser console says something interesting:

The custom element definition for "tab-sheet"
      was finalized before a style module was registered.
      Make sure to add component specific style modules before
      importing the corresponding custom element. vaadin-themable-mixin.js:73

As you are not supposed to actively import the styles in frontend/themes/my-app/components , how would I influence that component-specific styling is applied prior to using the component in some main view (which is determined via routes.ts)?

(I didn’t quite get what you meant when linking to the _set_theme function?)

@yummy-rhino , any more infos on this?

No, not at the moment.