function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Gary WGary W 

Why is the error "Cannot read properties of undefined (reading 'setProperty')" occurring in my LWC FSC when using section components on flow screen?

I'm building a Lightning web component to be used as a flow screen component. In the LWC, I allow the border color of the component to be customised using a custom property. To set the color of the element, I'm using variables in my CSS file, and then updating them to the value of the color property in my LWC .js code. I was originally setting CSS variables like this:
document.body.style.setProperty('--MyFSC-borderColor', this.borderColor);
However, this affected all instances of the flow screen component on a screen.

I found a suggestion (https://forcepanda.wordpress.com/2021/07/27/how-to-dynamically-set-custom-css-properties-in-lwc/comment-page-1/#comment-5025) to use the following code instead, which scopes the function to only the to the individual component:
this.template.host.style.setProperty('--MyFSC-borderColor', this.borderColor);
This worked perfectly, until i added a section component to my flow screen, after which I started getting the error:

Something went wrong with the "MyFSC" screen component on the "MyFlow" flow. Contact your Salesforce admin about this error. Cannot read properties of undefined (reading 'setProperty')

Removing the section component from the screen resolves the error, however I would like to be able to scope my CSS variables to individual FSC instances, while also using sections. How can this be done?