Declarations Prop

The declarations prop accepts any valid CSS property and CSS selectors. We've seen that all the pseudo props and responsive style props accepts CSS selectors. The declarations prop is a good place to apply selectors that are not scoped to pseudo states, responsive design etc.

❌

<template>
  <v-box
    :declarations="{
      color: 'tomato',
      '&:has(p)': {
        bg: 'indigo',
      },
    }"
  >
    <p>Just for convenience</p>
  </v-box>
</template>

Just for convenience

TIP

This is also a good place to apply scoped CSS custom properties.

❌ won't work as Vue.js does not consider --border-input a valid attribute

<v-box --border-input="gray">
  <v-box is="input" border="1px solid var(--border-input)"> </v-box
></v-box>

✅ works

<template>
  <v-box
    :declarations="{
      '--border-input': 'blue',
    }"
  >
    <v-box is="input" border="1px solid var(--border-input)" />
  </v-box>
</template>

<script setup lang="ts"></script>

<style scoped></style>