bug: Component renders content with or without slot #3219
Description
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
2.7.0
Current Behavior
An empty component (using shadow:false) shows no difference whether a not named slot is used or not.
Expected Behavior
a) documented what happens if content is inserted but no slot given
b) "ng-content"-like behavior (no slot, not content rendered)
Steps to Reproduce
Following component shows no difference in behavior, no matter whether a slot is inserted or not.
This behavior seems counterintuitive and confusing.
@Component({
tag: 'test-with-optional-slot',
styleUrl: 'test-with-optional-slot.css',
shadow: false,
})
export class TestWithOptionalSlot {
/** enables or disables slot */
@Prop()
public useSlot: boolean;
render() {
// similar behavior: return this.useSlot ? (<Host><slot></slot></Host>) : (<Host></Host>);
return (<Host>
{this.useSlot && <slot></slot>}
</Host>);
}
}it("should display content with slot - renders content anyway(?)", async () => {
const page = await newSpecPage({
components: [TestWithOptionalSlot],
html: `<test-with-optional-slot use-slot="false">Content</test-with-optional-slot>`,
});
expect(page.root).toEqualHtml(`
<test-with-optional-slot use-slot="false">
Content
</test-with-optional-slot>
`);
});
it("should display content with slot - works", async () => {
const page = await newSpecPage({
components: [TestWithOptionalSlot],
html: `<test-with-optional-slot use-slot="true">Content</test-with-optional-slot>`,
});
expect(page.root).toEqualHtml(`
<test-with-optional-slot use-slot="true">
Content
</test-with-optional-slot>
`);
});Code Reproduction URL
Additional Information
Having done some research about the <slot> element, I am uncertain whether this behavior is caused, or expected behavior of Stencil.