Working with Shadow DOM

Flow
1

I’m sure there is a simple answer to this, but I’m struggling with the docos on theming and styling. (Using 14.9.2 and Flow)
I have a ProgressBar and by default it was a light grey background (which in my case is from Lumo and is the 10% contrast).
For one instance only, I want to have the background color removed (i.e. made transparent).
Before anyone asks what have I done, nothing so far. And that’s the point, I’m unclear where I can make a change (CSS or style.js) and how I go about it.
Any help, gratefully appreciated.

2

This should guide you well https://foojay.io/today/how-to-style-a-vaadin-application/

3

I’m actually in the process of rewriting our styling docs for Vaadin 24 right now, so I’d be interested in hearing what you’ve figured out so far, and where they are falling short. (I think I know already but I’d like to confirm :grin: )

4

You can do this in your global css without Shadow DOM styling

vaadin-progress-bar [theme~=“transparent”] {
–lumo-contrast-10pct: transparent;
}

5

Then just use progressBar.addThemeName(“transparent”);

6

There is another alternative of using part selector

vaadin-progress-bar[theme~=“transparent”]::part(bar) {
background-color: transparent;
}

7

Also this works using global css

8

Thanks @quirky-zebra. Whilst that didn’t get me there, it gives me a nice resource to look back at as I do more in styling.

9

Thank you @yummy-rhino. FWIW: the second one worked, but the first one didn’t.

10

first one has a typo – there should not be a space between bar and [

11

Hi @useful-whale I suppose the issue for me was wanting to find a quick and easy way to do something that on first appearances looked easy. But going through the docos brought up a dizzying array of information. I trying to skim read and make sense, was in the end, self-defeating!
I’m wondering if we need a quick cheat sheet, then maybe more advanced examples?
And see, as I was typing, you pointed out the typo in the example above, and I would have been clueless that a space in there would cause the issue :grin:

12

yeah, I can imagine.

We’re doing a couple of things for V24:

  1. Switching entirely to global/light DOM styling instead of the current complicated mix of light dom and shadow dom styling
  2. Adding styling references to the component docs
  3. Rewriting the general styling documentation

The styling references will list all the parts and states etc for each component, e.g. like this
image.jpg

13

so you’ll be able to just copypaste those from there into your stylesheet

14

Thanks @useful-whale. I think even just doing #1 would be a great help :smile:

15

yeah, it helps to have ONE way to do things also when writing documentation about it

16

but the problem now is also that how do you even know what the parts are called, so #2 will help with that

17

ok, so, thanks for the input. If you have any other thoughts on the current styling challenges or docs about it, lemme know

18

Will do, Rolf. I’m migrating an app from 7 to 14, then 14 to most likely 24 (by the time I get 14 finished), so I’m sure I will have a few questions and comments along the way.

19

I’m sure you will :grin: