Style LWC by assigning the value of a JS Public Property to a CSS Custom Property

jsInCss.css

lightning-card{
    --my-color: black;
}

div{
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.myClass {
    color: var(--my-color);
}

.myOtherClass {
    border: 1px solid;
    border-color: var(--my-color);
}

.myBadge{
    --sds-c-badge-color-background: var(--my-color);
}

jsInCss.html

<template>
    <lightning-card title="JS Properties in CSS">
        
        <div class="container">
            <div class="myClass">
                Some colored text.
            </div>
        </div>

        <div class="myOtherClass">
            Text with border
        </div>

        <div class="myBadge">
            <lightning-badge label="Badge Base Component">
            </lightning-badge>
        </div>

    </lightning-card>
</template>

jsInCss.js

import { LightningElement, api } from "lwc";

export default class JsInCss extends LightningElement {
    @api customColor;

    renderedCallback() {

        this.template
            .querySelector("lightning-card")
            .style.setProperty("--my-color", this.customColor);

    }
}