bug: When i try to integrate with react application, the slot element contains hidden attribute instead of displaying the content. Note: This stencil component is using scoped element.

[muthupriyashanmugam]

Prerequisites

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

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

<div><slot name="cta"/></div>

The below-mentioned code is added to the index.html file

<component-a><div slot="cta"></div></component-a>

But the output shown in the react application

<slot name="cta" hidden>click here</slot>

Expected Behavior

The slot element content should shown in the react application if it is a scoped slot element.

System Info

npm version 10.7.0
node version 20.11.1

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

[tanner-reits]

@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.

[muthupriyashanmugam]

We are using the Stenciljs version ^4.7.0 in the package json. Let me check with the recent version and let you know.

[muthupriyashanmugam]

@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.

[muthupriyashanmugam]

@tanner-reits Any update on this issue?

[tanner-reits]

@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?

[ionitron-bot]

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.

[muthupriyashanmugam]

@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.

[muthupriyashanmugam]

@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.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!