I use css variables in the component and set the width of the div based on the data calculated in setup()
setup(props) {
const progressBar = PositionService.getProgressBar(props.position);
const progressWidth = `${progressBar}%`;
...
return { ..., progressWidth };
}
Then I use 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>
When rendering the page, I noticed that inline styles were added to the html parent component, causing
<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>
CSP blocks inline styles, so this method will not work. How to use css variables without inline styles?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This is a hacky solution, but since there are no inline styles this is the only one I can think of:
Add the "style" component to your template. This will be replaced by the
tag in the DOM. Inside the component add the required CSS variables to :root<component :is="`style`"> :root { --progress-bar-width: {{ progressWidth }}; } </component> <div class="progress-bar-width"></div><style lang="scss" scoped> .progress-bar-width { width: var(--progress-bar-width); } </style>