Enable global configuration for Fallthrough Attributes

[sheikharifulislam]

Blogs Component

<script setup>
import { ref } from "vue";
import Blog from "../components/Blog.vue";
const name = ref("");
const age = ref(0);
</script>

<template>
    <h1>Blogs</h1>
    <Blog v-model:name.uppercase="name" v-model:age.number="age" class="custom_class" />
    <h1>{{ name }}</h1>
    <h2>{{ age }}</h2>
</template>

This is a simple Blogs component. This component import and use the Blog component. this component passes two v-model with modifiers and one Fallthrough Attribute(class) in the Blog component.

Blog Component

<script setup>
defineProps(["name", "age", "nameModifiers"]);
const emit = defineEmits(["update:name", "update:age"]);

const handleUppercase = (e) => {
    const { value } = e.target;
    emit("update:name", value.toUpperCase());
};
</script>

<template>
    <div>
        <input type="text" placeholder="Enter your name" :value="name" @input="handleUppercase" />

        <input
            type="number"
            placeholder="Enter Your age"
            :value="age"
            @input="$emit('update:age', $event.target.value)"
        />
    </div>
</template>

What do I want to do?

Ans: I have received name, age, nameModifiers props on the blog component. but since I have passed model:age.number="age" on the blog component so VueJs automatically pass ageModifiers props on the Blog component. But I do not receive ageModifiers props on the Blog component because I don't need these props to me. since I don't receive ageModifiers props on the Blog component so VueJs will automatically add to the props on the root element's attributes. but I don't want this. if I want to solve this problem. I can use inheritAttrs: false on the defineOptions macros. but the problem is if I use inheritAttrs: false on the defineOptions macros VueJs will not automatically add the class (Fallthrough Attributes) on the Blog component root element. Because of this, I have to use $attrs or useAttrs() on the ```Blog`` component and manually add these attributes on the root element.

That solution I have thought

1. If VueJs provides such a way, if the user passes only valid HTML attributes as Fallthrough Attributes then VueJs will automatically add these Attributes to the root element otherwise, VueJs will automatically ignore adding these attributes to the root element.

2. If VueJs provides such a way to register Fallthrough Attributes list globally or locally, the user will list her Fallthrough Attributes and VueJs automatically add these Attributes to the root element if these Fallthrough Attributes (as props) register on the list.