Best way to handle Svelte component props

Question

I'm building an app using SvelteKit and Tailwind. I know that when using Tailwind to style it is recommended to leverage components to reduce the amount of repeated code you have to write using Tailwinds utility classes. My issue is that when making components based on HTML tags, for instance an <input> tag, dealing with props in that component that would normally just be attributes for that tag is getting overwhelming. MDN shows that the <input> tag has 31 possible attributes. I know that I won't be using all of them but going back and forth and adding them as props to a component is getting tiresome.

What is the best way to solve this problem without adding up to 31 lines of export let attribute to a component and adding them to the real HTML tag inside of the component?

Example:

<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
  "
/>

Answer 1

If you want to be able to do

<MyInputField name="123" maxLength="5" type="text">

Without having to declare all these extra attribute, the best way to do so is to use the $$restProps, this object will contain all the props that have been passed to the component but have not been explicitly defined as props (exported).

<script>
  export let name = "";
</script>

<input name={name} {..$$restProps}>

(here name was defined, so it will not be included in $$restProps and I had to add it myself)