bug: Slot-Fallback hidden when newlines exists

Abierto
  • ¿Algo no está bien?
#6,129 7 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
frontend, web-dev

Línea de trabajo

Comienza con la referencia slot-polyfill-utils.ts y la reproducción vinculada en CodeSandbox; después, compara el comportamiento introducido por pull request 6082. Reproduce el caso de espacios en blanco/saltos de línea y el caso inline; se considera terminado cuando un default slot vacío mantiene visible su fallback slot-fb cuando el marcado del host contiene únicamente espacios en blanco y saltos de línea.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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!

Lenguaje dominante
TypeScript
Estrellas
13.2k
Forks
865
Merge medio
2 d 16 h
PR fusionados (30 d)
29

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de stenciljs/core

Todos los issues de stenciljs/core

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.