See documentation here, there are sub parts “bar” value “value” which are available for styling, rest are hidden in shadow dom. It means that in your theme css you should be able to target the color to vaadin-progress-bar and either of these subparts.
I had a look at your mentioned sites and was able to adjust the colors:
<dom-module id="my-progress-bar-theme" theme-for="vaadin-progress-bar">
<template>
<style>
[part="bar"]
{
background-color: grey;
}
[part="value"]
{
background-color: green;
}
</style>
</template>
</dom-module>
Unfortunetaly, I was not able to set background-color dynamically. I tried, for instance:
<style>
// if value <= max (color of progress bar is red)
:host:in-range [part="value"]
{
background-color: red;
}
// else -> (change color to green)
:host:out-of-range [part="value"]
{
background-color: green;
}
</style>
How can I access the [part=“value”]
during runtime or how can I leverage the css methods on the shadow DOMs?
::slotted is the wrong solution here. It only targets elements that are “slotted” from the light DOM into the custom element’s shadow DOM. In the vaadin-progress-bar, there are no ’s, all the elements are inside the shadow DOM.
If you want to acces that [part=“value”]
, you should do it like this (slotted is the special keyword reserved for pseudo elements, you should not modify it)