Javascript 处理 Svelte 组件props 的最佳方式

我正在使用SvelteKit和Tailwind构建一个应用程序.我知道，在使用Tailwind进行样式设计时，建议利用组件来减少使用Tailwinds实用程序类编写的重复代码量.我的问题是，当基于HTML标记(例如<input>标记)制作组件时，处理该组件中通常只是该标记属性的props 变得越来越困难.MDN显示<input>标记有31个可能的属性.我知道我不会全部使用它们，但来回地将它们作为props 添加到组件中会让人感到厌烦.

如果不向组件添加多达31行(共export let attribute行)并将其添加到组件内部的real HTML标记中，解决此问题的最佳方法是什么？

示例:

<script>
    export let name;
    export let id;
    export let type;
    export let disabled;
    export let required;
    export let minLength;
    export let maxLength;
    export let min;
    export let max;
    export let pattern;

    let value;
    let borderColor = '#D1D5DB';

    const inputHandler = (e) => {
        if (e.target.value === '') {
            borderColor = '#D1D5DB';
        } else {
            borderColor = '';
        }
    };
</script>

<input
    {name}
    {id}
    {type}
    {disabled}
    {required}
    {minLength}
    {maxLength}
    {min}
    {max}
    {pattern}
    on:input={inputHandler}
    style={`border-color: ${borderColor}`}
    class="
    w-full px-1 py-px mb-4 bg-transparent border-2 border-gray-300 
    rounded-xl last:mb-0 valid:border-emerald-300 invalid:border-rose-400
  "
/>