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

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

[splitinfinities]

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now.

I think we need to do some more investigation on this. There are a few things that we need to hash out around the fallback nodes you're mentioning, and we need to determine if we do indeed want to make an API for non-shadow DOM components that is feature parity with Shadow DOM... I'm open to your thoughts on this behavior.

[PaulRaschke]

Thanks for your response.

To make it short, my use case is to integrate tailwindcss with my stencil components. The stencil components are headless and dynamic tailwind classes are applied to them to style them. This allows for flexible theming, but requires that the tailwind styles can work from within the components, which isn't possible with a shadow DOM (see this discussions). I haven't yet been able to find a solution that I am comfortable with, other than not using a shadow DOM.

IMHO, stencil should allow for full feature parity or no non-shadow DOM option at all. From my perspective, I would guess that many developers would have a hard time constantly focusing on the differences between the two modes, and I can't think of any use-case right now where a non-shadow DOM variant with fewer features would be sufficient.

[tanner-reits]

The fix for this went out as a part of today's v4.7.2 release!