please add support slot dynamic name

[amirhossein-fzl]

Describe the problem

<slot> name cannot be dynamic

table.svelte page ...

<script lang="ts">
    import Table from '@/components/table/Table.svelte';
    import Card from '@/components/Card.svelte';
    import CardBody from '@/components/CardBody.svelte';
    import Typography from '@/components/Typography.svelte';

    let striped: boolean = false;
    let bordered: boolean = false;
    let borderless: boolean = false;
    let small: boolean = false;
    let hover: boolean = false;
    let fixed: boolean = false;
    let noBorderCollpased: boolean = false;

    let fields = [
        {
            key: 'name',
            label: 'نام',
        },
        {
            key: 'family',
            label: 'فامیلی',
        },
        {
            key: 'age',
            label: 'سن',
        },
    ];
    let data = [
        {
            name: 'امیرحسین',
            family: 'فضلی',
            age: '18',
        },
        {
            name: 'محمدرضا',
            family: 'اخباری شاد',
            age: '29',
        },
        {
            name: 'اشکان',
            family: 'دژاگه',
            age: '35',
        },
        {
            name: 'مسعود',
            family: 'شجاعی',
            age: '39',
        },
    ];
</script>

<Card>
    <CardBody>
        <Typography size="base" weight="bold">جدول</Typography>

        <div class="mt-10">
            <div>
                <label for="striped">striped</label>
                <input id="striped" type="checkbox" bind:checked={striped} />
            </div>
            <div>
                <label for="bordered">bordered</label>
                <input id="bordered" type="checkbox" bind:checked={bordered} />
            </div>
            <div>
                <label for="borderless">borderless</label>
                <input id="borderless" type="checkbox" bind:checked={borderless} />
            </div>
            <div>
                <label for="small">small</label>
                <input id="small" type="checkbox" bind:checked={small} />
            </div>
            <div>
                <label for="hover">hover</label>
                <input id="hover" type="checkbox" bind:checked={hover} />
            </div>
            <div>
                <label for="fixed">fixed</label>
                <input id="fixed" type="checkbox" bind:checked={fixed} />
            </div>
            <div>
                <label for="noBorderCollpased">noBorderCollpased</label>
                <input id="noBorderCollpased" type="checkbox" bind:checked={noBorderCollpased} />
            </div>
        </div>
    </CardBody>

    <Table {data} {fields} {striped} {bordered} {borderless} {small} {hover} {fixed} {noBorderCollpased}>
        <svelte:fragment slot="cell(family)" let:field>
            <th><span style:color="red">{field.label}</span></th>
        </svelte:fragment>
    </Table>
</Card>

and Table.svelte component

<script lang="ts">
    import clsx from 'clsx';
    import '@/styles/components/table.scss';

    export let data;
    export let fields;
    export let striped: boolean = false;
    export let bordered: boolean = false;
    export let borderless: boolean = false;
    export let small: boolean = false;
    export let hover: boolean = false;
    export let fixed: boolean = false;
    export let noBorderCollpased: boolean = false;

    let slot_cell_regex: RegExp = /cell\((.*)\)/;

    let cell = Object.keys($$slots).find((value) => {
        return slot_cell_regex.test(value);
    });

    const cellHandle = (): string | boolean => {
        let cell_name: string;
        if (cell != undefined) {
            cell_name = slot_cell_regex.exec(cell)[1];

            return cell_name;
        }

        return false;
    };

    let namedCell: string | boolean = cellHandle();

    let classNames: string = '';
    export { classNames as class };
</script>

<table class={clsx('table', fixed && 'table-fixed', striped && 'striped', bordered && 'bordered', borderless && 'borderless', small && 'small', hover && 'hover', noBorderCollpased && 'noBorderCollpased', classNames)}>
    <!-- <slot /> -->
    <thead>
        {#each fields as field}
            {#if !namedCell}
                <slot>
                    <th>{field.label}</th>
                </slot>
            {:else if namedCell}
                {#if field.key == namedCell}
                    <slot {field} name={namedCell} />
                {/if}
            {/if}
        {/each}
    </thead>
</table>

Describe the proposed solution

...

Alternatives considered

...

Importance

i cannot use svelte without it

[Conduitry]

Duplicate of #6493.

[amirhossein-fzl]

@Conduitry

Is there a fix for the dynamic slot name problem in the svelte developers plans?