Unable to edit fill colors with css or javascript

Hi, I’ve created my lottie animation in after effects and named the layers and fills with unique IDs. When targeting these IDs in my stylesheet, the color fill properties aren’t being applied.

I absolutely need the fill colors to be a variable such as var(–textcolor) as this ‘color’ is being updated dynamically with javascript.

I have also attempted to target the unique IDs with javascript but the elements cannot be found.

After doing some digging and being a bit of a newbie to code I’ve determined this is where the color is being applied “k”: [0.921951593137, 0.921951593137, 0.921951593137, 1]. I really just want to be able to either replace this with fill: var(–textcolor) / override this with css/javascript / or even apply var(–textcolor) via expression in after effects? :

            {
                "ty": "fl",
                "c": { "a": 0, "k": [0.921951593137, 0.921951593137, 0.921951593137, 1], "ix": 4 },
                "o": { "a": 0, "k": 100, "ix": 5 },
                "r": 1,
                "bm": 0,
                "nm": "#cfill",
                "mn": "ADBE Vector Graphic - Fill",
                "hd": false,
                "ln": "cfill",
                "cl": "cfill"
            }

Just to expand on this, I am loading the lottie via html lottiePlayer as such. This might be my problem as all the json information, svgs, paths, fills are within #shadow-root (open):

< lottie-player id=“signature” src=“assets/signature.json” background=“transparent” speed=“1.5” direction=“1” mode=“normal”>

*I’ve put spaces next to ‘<’ ‘>’ as the html would not show in this thread for some reason