Vue3透传Attributes对 class 和 style 的合并设计缺陷

[ftao123]

父组件

import HelloWorld from './components/HelloWorld.vue'
import { ref} from 'vue'
const name = ref(0)
</script>
<template>
  <HelloWorld 
  msg=""  
  class="test-baz"
  v-model:my-demo.uppercase="name"
  />

</template>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

HelloWorld组件

defineProps<{ msg: string }>()
const [myDemo, myDemoModifiers] = defineModel('myDemo',{
  // get我们这里不需要
  set(value:string) {
    if (myDemoModifiers.uppercase) {
      return value?.toUpperCase();
    }
  },
});
</script>

<template>
  <input class="input-color" :class="$attrs.class" type="text" v-model="myDemo" />
</template>

<style scoped >
.read-the-docs {
  color: #888;
}
 .test-baz {
  color: green ;
}
.input-color {
  color: red;
}

</style>

根据Vue官网的描述

在使用HelloWorld 组件时候我无法覆盖HelloWorld 组件的默认样式，因为样式合并为test-baz input-color，外部样式的优先级低于内部默认样式，这明显不符合组件的封装思想，样式应该合并为 input-color test-baz。