Change ListItem background color in code

[Dirk_Vandervoort]

I am populating List with ListItems in JavaScript. I would like to set the background color of the ListItem to the value of a variable. I cannot figure out how to. Here are my efforts:

let rgbaColor= _some_legitimate_color_variable_
const listItem = document.createElement("calcite-list-item");
listItem.setAttribute("label", "Some Label");
listItem.setAttribute("value", "Some Value");
listItem.setAttribute("description", "Some description.");
listItem.addEventListener("click", onListClickHandler);
// this works but...
listItem.style.setProperty("background-color", rgbaColor);
// the style gets masked
document.GetElementById("my-calcite-list").appendChild(listItem);

the element.style is correct: 

But in the DOM there is a child element <tr> that masks the style with a background color. 

If I disable the background-color if the <tr>'s container, the ListItems are colored according to the variable:

Which is what I want, without the manual gymnastics.

I hope you can help.

[KittyHurley]

@Dirk_Vandervoort Calcite's next release will offer customization for List and List Items through component tokens. The effort is tracked through issue #7180. 

Once released, each component page will list the tokens available in the "Styles" section, for example the Action component's CSS variables.