Subscribe on changes!

`v-bind="$attrs"` in `<component>` does not render as `is` attribute

avatar
Feb 27th 2022

Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

  • Add is attribute in custom component

What is expected?

component with v-bind="$attrs" is correctly parse as is $attrs.

What is actually happening?

component is rendered like a web component. is attribute needs to be binded explicitly.


I don't know if it is a bug or working as intended, but I do expect that all $attrs are forwarded and binded to the component instance and rendered as is tag attribute.

I'm trying to create a base component that works as a foundation for others components that don't know the context when it will be used, so I cannot make is explicit at this level.

To make it work I have to bind explicitly the is attribute.

npm ls:

├── @vitejs/plugin-vue@2.2.2
├── typescript@4.5.5
├── vite@2.8.4
├── vue-tsc@0.32.0
└── vue@3.2.31
avatar
Feb 27th 2022

is attribute is needed(compile time) for <component> to be considered a dynamic component.

<script setup>
  defineProps(['is'])
</script>

<template>
  <pre>$attrs: {{ JSON.stringify($attrs) }}</pre>
  <component v-bind="$attrs" :is=$props.is>
    <slot />
  </component>
</template>