3

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?

| improve this question | | | | |
4

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.

| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.