Style with Superpowers – Because one-element-at-a-time is for amateurs

Vaadin’s Style is nice… if you’re styling one lonely component with a full server-side identity and a therapist. But what about all those poor elements you don’t even have a reference to?

Introducing Viritin’s upgraded Style, now with:

  • :white_check_mark: Style any Element, even the forgotten middle children. :dart: them using CSS selectors, even inside shadow DOM. You can also apply the same style rules to any number of elements, instead of defining the n times for each and every (fine, you can also write a method for this :man_shrugging:).
  • :thread: Inject proper CSS into host page (no messy inline spam)
  • :art: Strongly typed color and backgroundColor (thanks to this thing)

You could possibly express the whole Lumo theme in Java now :thinking: Which is either brilliant or worrying. Possibly both.

:mag: Simple demo:
addons.dokku1.parttio.org/styling

:test_tube: More magical chaos:
GitHub examples

Use it. Abuse it. And stop injecting style tags from JS like it’s 2015.

4 Likes

Love it! Thanks Matti!

Why are your components not already integrated in Vaadin? That is awesome work!