ionic-team / ionic-team/ionic-framework

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

Abierto
#30,744 0 comentarios 0 reacciones 0 asignados Ver en GitHub
triage
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### 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_

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.