bug: Slot-Fallback hidden when newlines exists

[dutscher]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.23+

Current Behavior

Hi there, i encounter a bug with the latest version 4.25.1, but the issue comes from 4.23.1 https://github.com/ionic-team/stencil/pull/6082. And the correct addition see here the the comment https://github.com/johnjenkins/stencil/blob/2c607c6407f9ed2a256ec85973e1c6384b701d21/src/runtime/slot-polyfill-utils.ts#L10

The problem is:

<s-text-field>
	<span slot="label">Label</span>
</s-text-field>

Due whitespace/newlines in the default slot is the which gets

---

Here is everything fine:

<s-text-field><span slot="label">Label</span></s-text-field>

Here we have an empty which get and its not hidden.

Expected Behavior

is visible with empty default slot with newlines and whitespaces.

System Info

Platform: windows (10.0.22621)
   CPU Model: AMD Ryzen 7 7840U w/ Radeon  780M Graphics      (16 cpus)
    Compiler: C:\www\repos\huk\web-lib-style\node_modules\@stencil\core\compiler\stencil.js
       Build: 1737767058
     Stencil: 4.25.1
  TypeScript: 5.5.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

The render method ot this stencil component looks like this:

@Component({
  tag: 's-text-field',
})
export class STextField {
render() {
 return (
      <Host>
        <label class={'wrapper'}>
          <div class={'description'}>
            <div>
              <slot name="label" />
            </div>
          </div>
          <div class={'input-wrapper'}>
            <div class={'input'}>
              <slot>
                <input />
              </slot> 
            </div>
          </div>
    </label>
 </Host>);
}
}

Code Reproduction URL

https://codesandbox.io/p/devbox/slot-bug-reproduce-6hhnwj

Additional Information

The slot fallback ist needed to get a external <input into the webcomponent:

<s-text-field>
	<input type="text" />
</s-text-field>

Cheers and thanks for your hard work!

[johnjenkins]

hey! Thanks for raising the issue.

I don't think this is a stencil issue per se', rather just how custom elements / slots are implemented by default.

I downgraded your project to stencil 3 and the 'problem' remains

What would happen if you wanted to slot an empty space? (e.g. you slot whatever a user types into an input)

Some references:

Lit's docs

Discussion with browser implementers

Ongoing discussion around DSD

[dutscher]

But it works with stencil "@stencil/core": "^4.22.3". And sorry its important to not use the shadowDom, i correct the codesandbox.

Also with 4.23.0

But with 4.23.1

Cheers

[johnjenkins]

Ah ok, thank you - that makes it clearer!

But it does mean we have to have a different conversation :D ... Stencil's proprietary slot code now correctly follows / mimics it's native counterpart.

I'll leave it to @christian-bromann to think about whether Stencil should break from convention or not.

[christian-bromann]

IMHO we should strictly follow web standards here and don't break from any conventions as this will be hard to document and maintain over time.

@dutscher do you see a way how we can enhance Stencil with a feature instead to simplify the use case you are working with? Maybe custom Stencil properties to the <slot /> tag that modifies this behavior?

[johnjenkins]

it's tricky 'cos there's not even a potential spec to think about or work from. Closest we get is a suggestion of <slot trimwhitespace>Fallback</slot>

[christian-bromann]

That's what I had in mind as well. Alternatively we could introduce a Stencil option that allows to defines specific behavior flags for specific components. This would keep the feature more within Stencils API realm rather than extending one we don't control (e.g. what if the webcomponent spec introduces the same attribute with a different meaning, it also could get user confused as they don't immediately connect this flag to be Stencil specific).

[dutscher]

the trimwhitespace (or trim only) attribute is awesome. this will fix the other issue that the css [name=paste]:empty {display:none} selector works on <slot name="paste" trim></slot> <comp><div slot="paste"> </div></comp>

cheers