Let's say you want to target some pseudo element to give it like a dynamic color
or something. But you have that color
value that come from Vue...
- You can't use CSS, you don't have access to the
color
value - You can't use
v-bind:style
on a pseudo element - Vue doesn't let you use
<style></style>
in your template tag, vue-loader or vue-template will filter out any style tag
Solution: Make a little component to output a style tag
main.js
Vue.component('v-style', {
render: function (createElement) {
return createElement('style', this.$slots.default)
}
})
Component.vue (in your
<template></template>
)
<v-style type="text/css">
.progress::-webkit-progress-value { background-color: {{ color }}!important; }
</v-style>
I had to use !important
with this solution, I saw some people using a unique _uid to target the element properly using <component is="style">
, but this one seems faster 👌
Top comments (1)
You can use
<component>
too.