Lightning web component slot is not working inside select?












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?






lightning-web-components







share|improve this question



























    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?






    lightning-web-components







    share|improve this question

























      3












      3








      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














      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




      lightning-web-components






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked 7 hours ago









      JeffJeff

      589312




      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

























            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


















            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















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            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






























              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




























                3












                3








                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















                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














                share|improve this answer



                share|improve this answer








                edited 6 hours ago

























                answered 6 hours ago









                joshiijoshii

                868




                868






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Salesforce Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    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















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    香粉寮

                    Image
                    香粉寮 香粉寮 （英文： Heung Fan Liu ）位於香港新界沙田區大圍，其北面山坡為大圍村原居民用以安葬之地。 目录 1 命名 2 歷史 2.1 天體活動 3 相關參見 4 參考文獻 5 外部連結 命名 香粉寮中的「香粉」是指該地一帶所種植的香樹上的粉末，而「寮」則指以前當地居民在該地所搭建的寮屋。 歷史 以前，當地居民以出產香料為生，並在當地種植香木，靠旁邊的城門河水力磨製香粉。 天體活動 在1930年代，該地曾以舉辦天體活動而聞名。 在1932年，當時一名連伯氏（Lanepart）的拉脫維亞人成立香港裸體運動會（ Hong Kong Nudist Society ），在該處進行天體活動，引來香港傳媒廣泛報導 [1] 。當時華人社會對於裸體的觀點，與外籍人士大為有異，也出於好奇，探頭探腦令天體營不勝其擾，天體營最終搬離，遠走馬灣島中鑊底灣，直至1960年代，由於參與人數不足，於鑊底灣的天體活動亦告終止。 相關參見 美田邨 恆峰花園 翠景花園 香粉寮街 碧田街 香粉寮發展項目 參考文獻 ^ 拂袖生. <<初談香港早期天體運動>>(上). [ 2010-12-26 ] .   外部連結 爾東. 趣談新界街道. 明報出版社. 2006: 165. ISBN  9628918311.   这是一篇與香港地理相關的小作品。你可以通过编辑或修订扩充其内容。 查 论 编 This page is only for reference, If you need detailed information, please check here
                    Read more

                    GameSpot

                    Image
                    body.skin-minerva .mw-parser-output table.infobox caption{text-align:center} GameSpot 戰地風雲：惡名昭彰2在Gamespot的評論 网站类型 新聞 持有者 CBS 创始人 Pete Deemer Vince Broady Jon Epstein 网站 http://www.gamespot.com/ 注册 Optional (free and paid) 推出时间 1996年5月1日 [1] GameSpot （中国大陆：游戏基地），於1996年5月由Pete Deemer和Vince Broady創立，是一個提供新聞、評論、預告片、下載及其他的相關資訊的電子遊戲網站。GameSpot被一間後來被CNET收購的企業ZDNet所收購。根據Alexa，GameSpot.com是200個網路擁擠最嚴重的網站之一。 除了由GameSpot員工創作的內容，網站還允許用戶寫評論、網誌、之後在網路論壇分享。一些在CNET旗下的GameFAQs分享。 2004年， GameSpot被Spike TV的觀眾選上「電子遊戲賞節目」贏得「最傑出遊戲網站。 [2] 其他的遊戲網站還有IGN、1UP.com、GameSpy是它最大的競爭對手。2008年，根據Compete.com的統計，「gamespot.com」吸引了最少6000萬人的點擊率。 [3] GameSpot的主頁鏈結了到最近新聞、評論、預告、和一些有關遊戲機的入口：Wii、任天堂DS、電腦遊戲、Xbox 360、PSP、PlayStation 2、PlayStation 3。它還有一列「最受歡迎遊戲名單」，還有給用戶快速獲得遊戲資訊的搜尋器。GameSpot 還包括一些小範圍的遊戲機：任天堂64、GameCube、Game Boy Color、Game Boy Advance、Xbox、PlayStation、SEGA Saturn、Dreamcast、Neo Geo Pocket Color、N-Gage、手機遊戲。 目录 1 歷史 1.1 國際歷史 1.2 著名的員工 2 評論和分...
                    Read more

                    璽

                    Image
                    國家象徵 事物 國號 國旗 國徽 國歌 國旗歌 國慶日 國家格言 國家代表色 國籍標誌 國家代碼 國家航空公司 國技 國樂 國璽 國石 （ 日语 ： 国石 ） 國菜 人物或拟人形象 國家元首 国父 国家化身 非人生物 國獸 （ 英语 ： List of national animals ） 國鳥 國花 國樹 查 论 编 本條目 論述以部分區域為主 ，未必具有普世通用的觀點。 請 協助補充內容 以避免偏頗，或討論本文的問題。   「 国玺 」重定向至此。關於法國法兰西岛大区上塞纳省的一个市镇，詳見「 索城 」。 太平天國玉璽 璽 是帝王用以署名的印章，武则天以后则多以 宝 名之。「璽」字的由來是秦始皇以和氏璧（一說是用藍田玉）製造玉璽，璽為印記之意。古時不少國家的君主均有專用的印章為印記，其中又以秦始皇的 傳國璽 最为知名。現代也以「璽」稱呼國家使用的印章，稱為 國璽 。 目录 1 中國 2 日本 3 參見 4 参考文献 5 外部链接 中國 秦、兩漢、新、魏、西晉、前趙、東晉、宋、南齊、梁、陳、隋、唐、後梁及後唐各朝沿用秦始皇之傳國玉璽，上面刻有「受命於天，既壽永昌」，以和氏璧製造，其中在王莽篡漢時，曾向當時的太皇太后王政君索取傳國玉璽，王政君非常憤怒，便將玉璽取出摔砸於地，為此傳國璽還碎了一角，雖然日後王莽以黃金補上缺角，卻仍看的出摔碎的痕跡。傳國玉璽在後唐末帝李從珂自焚之時失蹤。 在宋朝以前，皇帝通常也同时沿用秦朝 乘舆七玺 的制度，即在仅用于礼仪场合的传国玺外，另作皇帝日常办公用玺六方（皇帝之玺、天子之玺、皇帝行玺、天子行玺、皇帝信玺、天子信玺），重大礼仪时与传国玺一道作为礼器同列于御座御舆之前，象征皇权至上。惟唐初失传国玺，唐太宗另作一方宝玺代替，后复得传国玺，则自作宝玺易名“皇帝神玺”，传国玺称“受命玺”，与皇帝天子六玺合为乘舆八玺。五季纷扰，玺制混乱，至宋，皇帝就只用三方宝玺，一方为礼仪用玺受命宝（傳國璽此時已失踪，該玺為自作），另两方为日常办公所用的“书诏之宝”与“天下合同之宝”。宋徽宗时虽复活乘舆八玺之制，但为了强调自己的...
                    Read more