Use CSS variable in Vue component (scoped)-CodePudding

At the moment I need to have 3 card components, 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 component, and this works fine with 1 card, but breaks with multiple. When I have multiple components, 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 component, and then ignores the second one completely (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 component

<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 components


<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>

CodePudding user response：

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.org/guide/component-template-refs.html

CodePudding user response：

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 component. document.querySelector queries all elements, regardless of component instance they belong to, also accesses only one that can be unrelated to current component instance.

If DOM elements need to be acccessed in a component, this is commonly 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 component:

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