Change the color of ArcGISLayerList header background?

[ColleenDixon]

We are using an ArcGISLayerList widget which uses calcite-flow / calcite-flow-item under the hood with a calcite-panel in the calcite-flow-item.

I would like to change the header background to match our UI:

The problem I am running into is:

1. header is inside the shadowDom so I can't directly style this through CSS

2. The var used for the header background is the same var used for the entire background

I would like it to look like this:

Here is the header slot nested in several shadow-doms that I cannot penetrate with CSS: 

And setting the var --calcite-color-foreground-1 to green gives me this:

I am trying to come up with the least hacky solution possible to prevent incurring techical debt when classes and nesting changes, but I am open to any suggestion 🙂

[Sage_Wall]

Hi @ColleenDixon with the introduction of web components into the API situations like these are becoming more common.  I came up with this solution but it may have other unintended consequences ( or maybe they will be happy surprises ) because it changes the background color for all calcite-flow elements. Thanks for bringing this up hopefully we can improve the ability to style things in the future.

https://codepen.io/sagewall/pen/raBxOLy

[Sage_Wall · Accepted solution]

@ColleenDixon I made a mistake.  That first solution will work next release at 4.32.  This is a less elegant solution that would work at 4.31

https://codepen.io/sagewall/pen/MYgKaqo 

[ColleenDixon]

That worked for me, thank you!

Did have some unintended consequences a few other places like the info window but I can try and work around those