bug: Slot-Fallback hidden when newlines exists

Aperta
  • Qualcosa non va?
#6,129 7 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
typescript
Ambito
frontend, web-dev

Direzione di ricerca

Inizia dal riferimento slot-polyfill-utils.ts e dalla riproduzione collegata in CodeSandbox, quindi confronta il comportamento introdotto da pull request 6082. Riproduci il caso con spazi bianchi e ritorni a capo e il caso inline; il lavoro è completo quando un default slot vuoto mantiene visibile il proprio fallback slot-fb quando il markup dell’host contiene solo spazi bianchi e ritorni a capo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Request For Comments
Prerequisites
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:

Image

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

Due whitespace/newlines in the default slot is the which gets and its hidden.

Here is everything fine:

Image

<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!

Lingua principale
TypeScript
Stelle
13.2k
Fork
865
Merge medio
2g 16h
PR unite (30g)
29

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di stenciljs/core

Tutte le issue di stenciljs/core

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.