-
-
Notifications
You must be signed in to change notification settings - Fork 834
Inconsistent behavior: slot-fb breaks styling of default slot content in component with shadow: false #2937
Description
Stencil version:
@stencil/core@2.6.0
I'm submitting a:
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/
Current behavior:
Slot default content is rendered inside the component slot-fb, which may cause styling issues. For example, this breaks layout styling when the parent element defines a flex layout, since it will not affect the children of slot-fb. With shadow: true this problem doesn't occur.
This could also pose an issue on legacy browser that don't support the shadow DOM.
Expected behavior:
The component should look and behave the same with shadow: true and shadow: false. slot-fb shouldn't have an effect on the style/layout of the component.
Steps to reproduce:
If you use the component as follows, with shadow: true the layout is rendered correctly, as soon as shadow: false, scoped: true is set, the component is rendered incorrectly:
<my-component></my-component>This works correctly in both cases, because the passed slot content is added as direct children instead of being wrapped in slot-fb:
<my-component>
<div class="item">Passed #1</div>
<div class="item">Passed #2</div>
<div class="item">Passed #3</div>
</my-component>Related code:
import { Host, Component, h } from '@stencil/core';
@Component({
tag: 'my-component',
styles: `
:host {
display: flex;
gap: 0.5rem;
}
.item, ::slotted(.item) {
border: 2px solid #ccc;
padding: 0.25rem;
}
`,
shadow: false,
scoped: true,
})
export class MyComponent {
render() {
return (
<Host>
<slot>
<div class="item">Default #1</div>
<div class="item">Default #2</div>
<div class="item">Default #3</div>
</slot>
</Host>
);
}
}Other information:
Perhaps the slot default content should be rendered outside the slot component in the same way as passed slot content is handled, or this problem can be circumvented with a different component structure.