How to use a JS property in a CSS style?

Question

While making a Lightning Web Component, I am trying to use a JS property in an inline CSS style, but it's more complicated than I thought.

My property looks like this:

get yesVisColorLabel() { return 'background-color: ' + this.label.BCV_Yes_BGColor; }

This is what I have tried in my HTML file so far:

<td style={yesVisColorLabel} key={it2.value.Id}></td>

Error: } expectedcss(css-rcurlyexpected) with the pointer at the first {

<td style={!yesVisColorLabel} key={it2.value.Id}></td>

Error: Invalid expression {!yesVisColorLabel} - LWC1060: Template expression doesn't allow UnaryExpressionlwc

<td style="{!yesVisColorLabel}" key={it2.value.Id}></td>

Error: LWC1034: Ambiguous attribute value style="{!yesVisColorLabel}". If you want to make it a valid identifier you should remove the surrounding quotes style={!yesVisColorLabel}. If you want to make it a string you should escape it style="{!yesVisColorLabel}".lwc

And so I am back at square 2, because I had already tried that one. The errors are given by the Visual Studio editor that uses the LWC extensions.

What is the valid syntax?