Svelte：组件上下文

Question

I created a custom dropdown component. I have multiples instances of it on the same page like this:

label : <Select>
label : <Select>
label : <Select>

Whenever I click on the component, the first one opens only. How can I fix this? Thank you.

// Select.svelte

<div class="dropdown">
<slot></slot>
</div>

SelectItem.svelte

<Select>
 content
</Select>

items.svelte

{#each items as item}
<item />
{/each}

item.svelte

<SelectItem/>

Answer 1

Ideally, you would have something like this

<script>
//App.svelte
    import Select from "./Select.svelte"
    let options = [
        {label:"State 1", id:1},
        {label:"State 2", id:2}
    ]
    let country = [
        {label:"Country 1", id:1},
        {label:"Country 2", id:2}
    ]
</script>


<Select options={options}/>

<Select options={country} />

<script>
//Select.svelte
    export let options = []
</script>


<select>
        {#each options as option} 
            <option>{option.label}</option>
        {/each}
</select>

Check REPL