Lightning Web Components – How to Fix ‘Cannot Read Properties of Undefined’ Error

I'm building a Flow Screen Component, however the error "Cannot read properties of undefined (reading 'setProperty')" is being displayed below the component when I debug my flow.

Here's my component's JS file:

import { LightningElement, api } from 'lwc';

export default class DisplayInfoPanel extends LightningElement {
    @api iconName = 'utility:info';
    @api altText;
    @api iconSize = 'small';
    @api richText;
    @api borderColor = 'rgb(0, 112, 210)';
    @api iconForegroundColor = 'initial';
    @api iconBackgroundColor = 'initial';

    isFirstRender = true;
    renderedCallback() {
        if (!this.isFirstRender) {
            return;
        }
        this.isFirstRender = false;

        this.template.host.style.setProperty('--displayInfoPanel-borderColor', this.borderColor);
        this.template.host.style.setProperty('--displayInfoPanel-iconForegroundColor', this.iconForegroundColor);
        this.template.host.style.setProperty('--displayInfoPanel-iconForegroundDefaultColor', this.iconForegroundColor);
        this.template.host.style.setProperty('--displayInfoPanel-iconBackgroundColor', this.iconBackgroundColor);
    }
}

HTML file:

<template>
    <div class="displayInfoPanel_container slds-media slds-box">
        <lightning-icon class="slds-media__figure displayInfoPanel_icon" icon-name={iconName} alternative-text={altText} title={altText} size={iconSize}></lightning-icon>
        <lightning-formatted-rich-text class="displayIconWithText_richText slds-media__body" value={richText}></lightning-formatted-rich-text>
    </div>
</template>

The setProperty part of the error points me to the way I'm setting my CSS variables. I was originally setting them like this, which did not produce the error:

document.body.style.setProperty('--displayInfoPanel-borderColor', this.borderColor);

However this affected all instances of the component on the screen, which was not desired.

I found a suggestion to use the following code instead, which scopes the function to only the to the individual component:

this.template.host.style.setProperty('--displayInfoPanel-borderColor', this.borderColor);

Is there a better way of setting my CSS variables which can handle multiple instances of the FSC? I've also tried this.style.setProperty however, that does not work, and the component fails to render.