Kdtyjb

What is better: yes / no radio, or simple checkbox?

Can you run a ground wire from stove directly to ground pole in the ground

The (Easy) Road to Code

Can a space-faring robot still function over a billion years?

Sundering Titan and basic normal lands and snow lands

Forcing Mathematica's Integrate to give more general answers

Why do phishing e-mails use faked e-mail addresses instead of the real one?

Is this nominative case or accusative case?

Can inspiration allow the Rogue to make a Sneak Attack?

Should I use HTTPS on a domain that will only be used for redirection?

Learning to quickly identify valid fingering for piano?

Are there other characters in the Star Wars universe who had damaged bodies and needed to wear an outfit like Darth Vader?

PTiJ: How should animals pray?

Remove object from array based on array of some property of that object

Is being socially reclusive okay for a graduate student?

“I had a flat in the centre of town, but I didn’t like living there, so …”

How to make sure I'm assertive enough in contact with subordinates?

Does the US political system, in principle, allow for a no-party system?

Ultrafilters as a double dual

Why do we call complex numbers “numbers” but we don’t consider 2 vectors numbers?

Did Amazon pay $0 in taxes last year?

Searching for a string that contains the file name

I can't die. Who am I?

PSPICE - must be 'I' or 'V' error

Lightning web component slot is not working inside select?

Lightning Web Component: A required metadata folder named “lwc” does not exist in this workspaceDynamic component creation in Lightning Web ComponentsWhy Lightning Web ComponentNot able to render dynamic Lightning Web Componentnot able to push lightning-web-component in salesforceLightning Web Component - Custom NamesSalesforce Lightning Web ComponentUsing unescape HTML in lightning web componentFetching data from Apex controller for lightning web componentLightning Web Component

3

1

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?

lightning-web-components

share|improve this question

asked 7 hours ago

JeffJeff

589312

add a comment | 

3

1

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?

lightning-web-components

share|improve this question

asked 7 hours ago

JeffJeff

589312

add a comment | 

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?

lightning-web-components

share|improve this question

asked 7 hours ago

JeffJeff

589312

<template>

    <select>

        <slot></slot>

    </select>

</template>

<c-select>

    <option>Option1</option>

    <option>Option2</option>

    <option>Option3</option>

</c-select>

share|improve this question

asked 7 hours ago

JeffJeff

589312

share|improve this question

asked 7 hours ago

JeffJeff

589312

asked 7 hours ago

JeffJeff

589312

asked 7 hours ago

JeffJeff

589312

1 Answer
1

active

oldest

votes

3

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.

share|improve this answer

edited 6 hours ago

answered 6 hours ago

joshiijoshii

868

add a comment | 

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "459"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f252978%2flightning-web-component-slot-is-not-working-inside-select%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

3

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.

share|improve this answer

edited 6 hours ago

answered 6 hours ago

joshiijoshii

868

add a comment | 

3

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.

share|improve this answer

edited 6 hours ago

answered 6 hours ago

joshiijoshii

868

add a comment | 

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.

share|improve this answer

edited 6 hours ago

answered 6 hours ago

joshiijoshii

868

share|improve this answer

edited 6 hours ago

answered 6 hours ago

joshiijoshii

868

answered 6 hours ago

joshiijoshii

868

answered 6 hours ago

joshiijoshii

868