slot bug: unable to render slot content with shadow: true

[venkatesh-nagineni]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

3.4.0

Current Behavior

As i am trying to create select component with options as a slot and enabled shadowDom but options are not populating inside slot position where as it showing outside, i had looked into this issue where as enabling shadoDom fix an issue but not

if i disabled shadowDom, it's working as expected but inserting options dynamically in react project displaying outside slot position, whereas this is working in angular as expected without any issue

Expected Behavior

should display slot position with appropriate intended position like inside select container

System Info

Stencil: 3.4.0

Steps to Reproduce

create select element with slot then pass options to the component

Code Reproduction URL

https://codesandbox.io/p/sandbox/stencil-web-component-forked-wsvm98?file=%2Fsrc%2Fcomponents%2Fmy-component%2Fmy-component.tsx%3A6%2C16

Additional Information

No response

[johnjenkins]

This is by design (of the standard select / option relationship - not stencil). Option elements must have a direct select element parent. select elements expect option elements to be direct descendants. Your slot element breaks this relationship

[venkatesh-nagineni]

@johnjenkins seems this is an issue in web component world with slots but if i disable shadow dom (shadow: false), it is working as expected but this create an issue in react project where i try to inject dynamic options and those options displaying outside slot position

i was trying for workaround which is not succeeded

[rwaskiewicz]

Hey @venkatesh-nagineni 👋

@johnjenkins is correct here:

This is by design (of the standard select / option relationship - not stencil). Option elements must have a direct select element parent. select elements expect option elements to be direct descendants.

Based on what is sounds like you're trying to do, I think this question might be more appropriate for our Discord forum - the #stencil-help channel is great for working through implementation issues like this. Can you do me a favor and open a thread there?

In the mean time, I'm going to mark this as an implementation question and close out the issue. Should something come out of the Discord thread, please feel free to create a new one!

[ionitron-bot[bot]]

Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for bug reports and feature requests. Please use our Discord server for questions about Stencil.

Thank you for using Stencil!