I'm building a LWC 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:
However, this affected all instances of the flow screen component on a screen.
I found a suggestion to use the following code instead, which scopes the function to only the to the individual component:
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?