Select Statement Initial Value Not Working

[stevesob]

I am using the "select" statement to create a control and it works great with bind:value except that I can't seem to set an initial value.

Here is the control, when calling from the parent I need the select to be on the selected option, and it always selects the first option.

<script>
  export let selected
  export let label = ''
  let colors = [
    'w3-red',
    'w3-pink',
    'w3-purple',
    'w3-deep-purple',
    'w3-indigo',
    'w3-blue',
    'w3-light-blue',
    'w3-cyan',
  ]
</script>

<p>
  <span class="w3-text-grey w3-margin-right">{label}</span>
  selected={selected}
  <select class="w3-select {selected}" bind:value={selected}>
    {#each colors as color (color)}
      <option class={color}>{color}</option>
    {/each}
  </select>

</p>

Parent calling

<script>
 import W3selectcolor from '../components/ui/W3selectcolor.svelte'
 let selected = 'blue'
</script>
<W3selectcolor label="Select Color:" bind:selected />

[Rich-Harris]

The value has to be one of the options. Change it to w3-blue and it works fine: https://svelte.dev/repl/e1a49385d1684473b80eb69caa7cadb9?version=3.5.4