Components are unable to hide child elements

[cjorasch]

Stencil version:

 @stencil/core@0.9.7

I'm submitting a:
[x] bug report

Current behavior:

Components are not able to prevent child elements from being rendered.

For example:

class MyComponent {
    @State() hidden: boolean;
    render() {
        if (this.hidden) return;
        return (
            <div>
                Some content
                <slot />
            </div>
        );
    }
}

// Component usage
return <my-component>Child Content</my-component>;

When the component is initially rendered it behaves as expected.

If the hidden state is set on the component then the component content does not render but the child elements (in this case "Child Content") still render.

Expected behavior:

It should be possible for a component to prevent child elements from being rendered.

It appears that Stencil is trying to provide default <slot /> behavior even if the component does not specify a slot.

Some possible approaches:

• If the render method returns null or undefined then do not render child elements. This would not handle the potential use case where the component want to render some content but omit child elements.
• Only include child elements if an explicit <slot> is rendered by the component. In general it seems risky to have default slot behavior when the component does not indicate a location for the content but maybe there are use cases for this feature.

[jthoms1]

If you set shadow: true on the component it works as expected. It appears this is an issue with how slot is being handled in stencil.

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