ionic-team / ionic-team/ionic-framework

bug: (HTMX compatibility) ion-button fails to hydrate when doing DOM replacement via htmx

Đang mở
#30,744 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

After an htmx swap/boost that inserts new DOM containing an ion-button, the Ionic web component fails to hydrate and no button is rendered (appears missing).

### Expected Behavior

After an htmx swap/boost that inserts new DOM containing an ion-button, the Ionic web component should hydrate properly, displaying the button as expected, with all active functionality.

### Steps to Reproduce

### pre-requisites
1. *Save the HTML file:* Save the provided HTML as `ionic-button.html`
```html

ionic button



ionic button


My button

HTMX load

```
2. *Run a Local Server:*
Eg: `python3 -m http.server 6000`
3. Visit `http://localhost:8000/ionic-button.html`.
### reproduction:
1. *Load Initial Page:* Ensure `ion-button` is correctly rendered with styling.

2. *HTMX Boost Action:*
- Click the “HTMX load” link in the document.

3. *Post-Swap Observation:*
- Note whether `ion-button` appears and functions after the page content is replaced by hx-boost.

*Expected vs. Actual Outcome*

- *Expected:* The `ion-button` should maintain its rendering and functionality.
- *Actual:* After hx-boost replaces the content, `ion-button` may not hydrate, rendering it non-functional or missing styling.

The code is simply using [hx-boost](https://htmx.org/attributes/hx-boost/) to replace the body with the same content again. All of the html elements are rendered including other ionic components, if any, except the buttons which don't hydrate for some reason.

### Code Reproduction URL

NA - Steps to reproduce include the application

### Ionic Info

NA
I'm using the CDN link directly and using webcomponents with vanilla js

### Additional Information

_No response_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

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.