Lightning web component slot is not working inside select?

Question

I'm trying to create a simple lightning web component that wraps a <select> element, using an unnamed slot to populate the options. However, the options are not being rendered. If I inspect the generated DOM elements, it is just rendering <slot></slot> as text inside the select element. If I move the slot outside of the select element, the slot works as expected.

This is the template for the component:

<template>
    <select>
        <slot></slot>
    </select>
</template>

And this is how I'm trying to use it:

<c-select>
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
</c-select>

Here is a playground link

Any thoughts on why this isn't working or how I could work around it?

Answer 1

This cannot be done. Elements that are slotable need to be able to be attached to a shadow dom. You can see the list here.

You would be better off building a select list component that accepts a list of options and using a for:each to loop through them in the child component.