Polymorphism

is prop

v-box takes an optional is prop that accepts any valid HTML element. If the is prop is not passed, the component renders a div by default.

<template>
  <v-box is="span" font-size="1.2rem" font-style="italic">Polymorphism via "is" prop.</v-box>
</template>

Polymorphism via "is" prop.

---

The is prop is compatible with eslint-plugin-vuejs-accessibility for stactic analysis of accessible elements.

asChild prop

v-box also supports the asChild prop popularized by Radix UI. When asChild is set to true, instead of rendering its default DOM element, v-box merges its props with its immediate child element.

NB: Only a single root element is allowed inside the default slot when using asChild.

<template>
  <v-box
    asChild
    background="tomato"
    padding="1rem"
    color="white"
    text-align="center"
  >
    <p>A box</p>
  </v-box>
</template>

A box