Not implemented Empty when <option/> with slot is nested inside <select/> with slot

[kwangure]

Describe the bug

Title says it. Nesting a "slotted" option component inside a "slotted" select component does not compile.

<script>
	import Select from "./Select.svelte";
	import Option from "./Option.svelte";
</script>

<Select>
	<Option>Option 1</Option>
	<Option>Option 2</Option>
	<Option>Option 3</Option>
</Select>

<!-- Select.svelte -->
<select><slot></slot></select>

<!-- Option.svelte -->
<option><slot></slot></option>

Reproduction

https://svelte.dev/repl/b4d2861bf2e84898970e25d551f55ef2?version=3.44.2

Logs

Not implemented Empty

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
    Memory: 3.12 GB / 5.70 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.6.1 - ~/.nvm/versions/node/v16.6.1/bin/node
    npm: 7.20.3 - ~/.nvm/versions/node/v16.6.1/bin/npm

Severity

blocking all usage of svelte

[ota-meshi]

Hi @kwangure.

I'm not a maintainer, but I'll comment as it may be able to help you.
I think you need to add a value attribute to the <option> tag.

<!-- Option.svelte -->
<script>
	export let value
</script>
<option value={value}>
	<slot></slot>
</option>

<script>
	import Select from "./Select.svelte";
	import Option from "./Option.svelte";
</script>
<Select>
	<Option value="Option 1">Option 1</Option>
	<Option value="Option 2">Option 2</Option>
	<Option value="Option 3">Option 3</Option>
</Select>

If there is no value attribute, Svelte compiler guess from the content, but it doesn't seem to work well with the <slot> tag.

I think it could be a bug that the error message is confusing to the user.

[ota-meshi]

I think it's probably the same as #2723.

[kwangure]

Closing this as a duplicate of #2723.