At the moment I need to have 3 card ponents, all with three different colors. The colors are applied to the :before pseudo-element (and multiple other areas), and therefore the easiest solution I believe would be to apply this with a CSS variable / property.

At the moment, I instantiate a new CSS property / variable in the mounted() of my ponent, and this works fine with 1 card, but breaks with multiple. When I have multiple ponents, only the first one gets the color and the second one does not even get the color. It seems to overwrite the previous color with the first ponent, and then ignores the second one pletely (no color property is shown in dev tools in the second one).

My question is, what would be the best solution to this problem? Is there a way to easily add a scoped CSS variable that does not override the other variables? Or would be the best course of action be to add all these styles in JavaScript?

Vue ponent

<template>
    <div :class="'card ' + clss">
        <div class="card-top">
            <h3>{{ title }}</h3>
        </div>
        <div class="card-center">
            <p>{{ message }}</p>
        </div>
        <div class="card-bottom">
            <a href="" class="btn-p card-btn">Learn more</a>
        </div>
    </div>
</template>

<script>
export default {
    name: "Card",
    props: ['clss', 'color', 'title', 'message'],
    data() {
        return {

        }
    },
    mounted() {
        var style = document.querySelector('.card').style;
        style.setProperty(`--color`, this.color);
    },
}
</script>
<style lang="scss" scoped>

// Example, not all styles are shown

.card:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: var(--color); // Example of where I need this color
}
</style>

Vue with all ponents

<template>
<div class="grid grid-cols-12">

  <!-- Green -->
  <Card
      title="Lorem1"
      message="Lorem"
      color="#00838d"
      clss="col-span-4"         
  >
  </Card>
  <!-- Purple -->
  <Card
      title="Lorem2"
      message="--bg-color"
      color="#0066b2"
      clss="col-span-4"         
  >
  </Card>
</div>
</template>

At the moment I need to have 3 card ponents, all with three different colors. The colors are applied to the :before pseudo-element (and multiple other areas), and therefore the easiest solution I believe would be to apply this with a CSS variable / property.

At the moment, I instantiate a new CSS property / variable in the mounted() of my ponent, and this works fine with 1 card, but breaks with multiple. When I have multiple ponents, only the first one gets the color and the second one does not even get the color. It seems to overwrite the previous color with the first ponent, and then ignores the second one pletely (no color property is shown in dev tools in the second one).

My question is, what would be the best solution to this problem? Is there a way to easily add a scoped CSS variable that does not override the other variables? Or would be the best course of action be to add all these styles in JavaScript?

Vue ponent

<template>
    <div :class="'card ' + clss">
        <div class="card-top">
            <h3>{{ title }}</h3>
        </div>
        <div class="card-center">
            <p>{{ message }}</p>
        </div>
        <div class="card-bottom">
            <a href="" class="btn-p card-btn">Learn more</a>
        </div>
    </div>
</template>

<script>
export default {
    name: "Card",
    props: ['clss', 'color', 'title', 'message'],
    data() {
        return {

        }
    },
    mounted() {
        var style = document.querySelector('.card').style;
        style.setProperty(`--color`, this.color);
    },
}
</script>
<style lang="scss" scoped>

// Example, not all styles are shown

.card:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: var(--color); // Example of where I need this color
}
</style>

Vue with all ponents

<template>
<div class="grid grid-cols-12">

  <!-- Green -->
  <Card
      title="Lorem1"
      message="Lorem"
      color="#00838d"
      clss="col-span-4"         
  >
  </Card>
  <!-- Purple -->
  <Card
      title="Lorem2"
      message="--bg-color"
      color="#0066b2"
      clss="col-span-4"         
  >
  </Card>
</div>
</template>

• javascript
• vue.js

2 Answers 2

CSS are cascading, the variable should be applied to a hierarchy of elements. It's a bad sign that DOM is directly accessed in Vue ponent. document.querySelector queries all elements, regardless of ponent instance they belong to, also accesses only one that can be unrelated to current ponent instance.

If DOM elements need to be acccessed in a ponent, this is monly done through refs:

<div :class="'card ' + clss" ref="card">

and

mounted() {
  this.$refs.card.style.setProperty(`--color`, this.color);
},

CSS variables (custom properties) are primarily needed to provide a value for nested styles. This isn't needed if a style is specified in the same ponent:

<div :class="'card ' + clss" :style="{ background: color }">

You have to use this.$refs here instead of document.querySelector('.card'). The document.querySelector('.card') is taking the one first element on the page. Using refs you're picking a reference to DOM element inside of your card item. Please add the ref attribute to your div in the template and replace document.querySelector('.card') with reference to your div using this.$refs .

Reference: https://v3.vuejs/guide/ponent-template-refs.html