Is it possible to define CSS to use across multiple widgets?

I have seen that you can define a stylesheet in page code but is it possible to in a widget reference an external stylesheet? Is it possible to define a theme without having to apply lots of styles on every element?

My goal would be to define a ton of classes and assign those and only then one off change styles. I also have noticed that defining a stylesheet and style configs on the same item yields problems. Stylesheets seem to only reliably work for items nested below.

I don’t believe that there is any easy, intentional way to do this. Any solution is going to be a bit hacky. I think the thing that I would try first would be to take advantage of the f7-row’s tag property and see if you can just include a direct link. Something like this

- component: f7-row
  config:
    tag: link
    rel: stylesheet
    href: path/to/your.css

I haven’t test this, so results are definitely not guaranteed.

Thanks I’ll try this in next day or so.

This seems like something that should be officially supported. @ysc ?

I am wary of anything that might amount to a free-for-all when dealing with technologies that might have implications, especially in terms of security (for example, some might find a way to trick users into clicking something that wasn’t what they wanted in the first place).
That’s why widgets only officially support expressions that are meant to mostly allow using a subset of a commonly-known language (JS), but limit what you can do, while allowing some interesting customization possibilities.
I’m also aware that you can circumvent them - but hopefully in the future, I think you shouldn’t.

That said its understandable. I think there could be compromises like css only served from openhab not open web etc so you have to manually install and is at your own risk. That also said limiting to styling (css) not all things (js, html, etc) is way better security wise then random js/html.

I feel there are ways that this could be implemented that prevents it from being randomly distributed etc. ability to define a local stylesheet and then fallback to defaults (in yaml) could be one way etc. Im mostly coming from the perspective of a single user not from the distribution of a widget that relies on my assets

Also a sort of similar function to what is requested was in habpanel. That said it wasn’t perfect or ideal but existed. I would consider implementing the solution if I know it were remotely to be accepted.