Incorporating CSS variables in my component has allowed me to dynamically set the width of a div based on computed data within the setup()
setup(props) {
const progressBar = PositionService.getProgressBar(props.position);
const progressWidth = `${progressBar}%`;
...
return { ..., progressWidth };
}
I then utilize this variable as a CSS variable.
<style lang="scss" scoped>
.progress-bar-width {
--progress-bar-width: v-bind("progressWidth");
width: var(--progress-bar-width);
}
</style>
Upon rendering the page, I observed that an inline style is being added to the parent HTML component, resulting in:
<a href="#/1070/applications/status/1" class="card position-relative border-gray-300 border-hover overflow-hidden h-500px" data-v-61475b35="" style="--61475b35-progressWidth:43.0613%;">.....</a>
Due to the Content Security Policy (CSP) blocking inline styles, this method is not viable. How can I implement CSS variables without relying on inline styles?