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',
      padding: '0.5rem',
      '&:has(p)': {
        background: '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>

Setting Vendor prefixes

The declarations prop is also where vendor prefixes should be applied when necessary. For the same reason as custom properties above, setting -ms-overflow-style directly as an attribute is invalid in Vue.js.

<v-box
  display="flex"
  gap="1rem"
  overflow-x="auto"
  scrollbar-width="none"
  :declarations="{
        '-ms-overflow-style': 'none',
        '&::-webkit-scrollbar': {
          display: 'none',
        },
      }"
/>

INFO

If a CSS property has an associated vendor prefix, VBox autogenerates and applies the vendor prefix on your behalf. Thanks to stylis.

NB: When you explicitly set vendor prefixes, they would only appear in the generated CSS if that vendor prefix is supported by the browser inwhich the code is running. This is because, VBox internally uses CSS.supports to permit style rules that are supported by the that browser.