bug: mock-doc does not retarget composed events at shadow boundaries

Đang mở
  • Có gì không ổn?
#7,012 0 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
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
testing, web-dev

Hướng nghiên cứu

Start by running the repro in src/testing/test/shadow-dom-events.spec.tsx with the fixture in src/testing/test/__fixtures__/shadow-events.tsx, which shows an outer listener receiving the inner element as event.target. The body says a fix already exists in #7008, so check that PR first, since the work is under way. Done means outer listeners see the shadow host as event.target, inner listeners still see the original target, and any existing spec expectations that depended on the old value are updated.

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

Mô tả

Prerequisites
Stencil Version

4.45.3 (current main)

Current Behavior

When a composed event bubbles out of a shadow tree in mock-doc, listeners outside that tree see the element the event was dispatched on as event.target. A browser retargets the event to the shadow host at every boundary it crosses.

Expected Behavior

Listeners outside a shadow tree see the shadow host as event.target, like in a browser. Listeners inside the tree keep seeing the original target.

System Info
Not environment specific, mock-doc behavior.
Steps to Reproduce

Two nested shadow components, event-wrapper-component renders event-inner-component:

const page = await newSpecPage({
  components: [EventWrapperComponent, EventInnerComponent],
  html: '<event-wrapper-component></event-wrapper-component>',
});
let target: any;
page.root.addEventListener('customclick', (ev: any) => (target = ev.target));

const inner = page.root.shadowRoot.querySelector('event-inner-component');
inner.dispatchEvent(new CustomEvent('customclick', { bubbles: true, composed: true }));

expect(target).toBe(inner); // passes on main, a browser gives you page.root
Code Reproduction URL

https://github.com/stenciljs/core/pull/7008 (src/testing/test/shadow-dom-events.spec.tsx and src/testing/test/__fixtures__/shadow-events.tsx)

Additional Information

This is not #4618. That one asks whether the event reaches the wrapper at all, and it does since #6301.

Fixing this changes what existing spec tests observe. A test that currently expects the inner element as event.target on an outer listener will fail afterwards, even though the new value is the correct one.

I have a fix in #7008.

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.