Skip to content

Inconsistent behavior: slot-fb breaks styling of default slot content in component with shadow: false #2937

@PaulRaschke

Description

@PaulRaschke

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Resolution: RefineThis PR is marked for Jira refinement. We're not working on it - we're talking it through.slot-related

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions