bug: Slot-Fallback hidden when newlines exists

Đang mở
  • Có gì không ổn?
#6,129 7 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
typescript
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

Bắt đầu với tham chiếu slot-polyfill-utils.ts và bản tái hiện CodeSandbox được liên kết, sau đó so sánh hành vi được giới thiệu bởi pull request 6082. Tái hiện trường hợp khoảng trắng/xuống dòng và trường hợp inline; được coi là hoàn tất khi một default slot trống vẫn giữ fallback slot-fb hiển thị khi markup của host chỉ chứa khoảng trắng và các dòng mới.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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!

Ngôn ngữ chính
TypeScript
Star
13.2k
Fork
865
Merge trung bình
2 ngày 16 giờ
Pull request đã merge (30 ngày)
29

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của stenciljs/core

Tất cả issue của stenciljs/core

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.