bug: (HTMX compatibility) ion-button fails to hydrate when doing DOM replacement via htmx #30744
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing 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
- Save the HTML file: Save the provided HTML as
ionic-button.html
<!DOCTYPE html>
<html>
<head>
<title>ionic button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
</head>
<body>
<h1>ionic button</h1>
<ion-button fill="outline" id="collabToggle">My button</ion-button>
<div hx-boost="true">
<a href="/ionic-button.html">HTMX load</a>
</div>
</body>
</html>- Run a Local Server:
Eg:python3 -m http.server 6000 - Visit
http://localhost:8000/ionic-button.html.
reproduction:
-
Load Initial Page: Ensure
ion-buttonis correctly rendered with styling. -
HTMX Boost Action:
- Click the “HTMX load” link in the document.
-
Post-Swap Observation:
- Note whether
ion-buttonappears and functions after the page content is replaced by hx-boost.
- Note whether
Expected vs. Actual Outcome
- Expected: The
ion-buttonshould maintain its rendering and functionality. - Actual: After hx-boost replaces the content,
ion-buttonmay not hydrate, rendering it non-functional or missing styling.
The code is simply using 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