bug: slot content gets hidden after switching back and forth between <slot> and null.

[CamielJalink]

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

3.1.0 (also tried 4.2 with experimental flag)

Current Behavior

When implementing conditional rendering on our component, content inside “” attribute works accordingly. However, when we switch back and forth between, for example a “

” and then back to the render function that returns “”, the content inside the slot tag gets the global parameter “hidden”.

We saw that there is a large PR open for all kinds of slot additions and fixes (PR-LINK), however, can this issue be resolved separately? and if not, how can we, for now, apply a fix for it?

Our component has a render method like this:

    renderContentSlot() {
        if (this.type === "vertical") {
            return (
                <div
                    class={`content-slot ${
                        this.showContentSlot ? "show" : "hide"
                    }`}
                >
                    <slot name="content"></slot>
                </div>
            );
        } else {
            return null;
        }
    }

Expected Behavior

Content slot un-hides when rendering slot content again.

System Info

No response

Steps to Reproduce

Create basic component with a content slot. Conditionally render that slot or render something else (such as a button, or even null). Then rerender the original state with the slot content and see that the slot is hidden with the 'hidden' global attribute.

Code Reproduction URL

private repo

Additional Information

No response

[alicewriteswrongs]

Hey @CamielJalink, thanks for filing this issue! I saw you provided a code snippet but would you possibly be able to put together a minimal reproduction of the issue? You could start by running

npm init stencil component slot-content-hiding-repro

that will give you a one-component project to start with that you could then modify in order to reproduce the error. This really helps us to diagnose and fix bugs since without a runnable example it's often difficult to reproduce the exact issue users are running into.

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

[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!