Open muthupriyashanmugam opened 1 month ago
@muthupriyashanmugam Have you tried using the latest version of Stencil? We've made some changes to slot behavior for scoped components in releases post v4.7.0 (your reported version). For more information, check out this section of the docs on what has been resolved and how to enable these fixes.
We are using the Stenciljs version ^4.7.0 in the package json. Let me check with the recent version and let you know.
@tanner-reits I have tried the latest version of stencil v4.18.0 but still it shows the hidden attribute added to the slot element.
Note: we are using the stencil library as a web component and compiling those code as a react component and used as a react npm module in another react application.
When we use the react application, we face this kind of issue.
@tanner-reits Any update on this issue?
@muthupriyashanmugam Can you create a complete reproduction case including the React portions? That way we can be sure to see the same behavior. Also, in your case, are you using the React output target?
Thanks for the issue! This issue has been labeled as needs reproduction
. This label is added to issues that need a code reproduction.
Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
For a guide on how to create a good reproduction, see our Contributing Guide.
@tanner-reits Yes, we are using the react output target option to generate the react component. In our case, the slot is adding the hidden attribute rendering when we use it in the react nextjs application.
I have tried to test this case in a sample react application, it's working fine. Then only I come to know that it may be the react nextjs makes an issue.
@tanner-reits Could you please help me to find out the cause for the issue which i am facing is that if i include my stencil scoped component in a nextjs react application as a node module, it's rendering as a shadow-root component.
Prerequisites
Stencil Version
v4.7.0
Current Behavior
The stencil component contains the non shadow dom which renders the slot-based element.
The below-mentioned code is added in the component-a
The below-mentioned code is added to the index.html file
But the output shown in the react application
Expected Behavior
The slot element content should shown in the react application if it is a scoped slot element.
System Info
Steps to Reproduce
Try to include the slot element in the stencil component and include it in the react application.
Code Reproduction URL
https://github.com/muthupriyashanmugam/stencil-issue
Additional Information
No response