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?