Demo
Click to swap
The button uses hx-get to fetch
htmx-fragment.html and inject it into the target. The
fragment contains more <bloom-button> tags — the
browser upgrades them on insertion.
Trigger + target
Nothing here yet — click above to fetch a fragment.
<bloom-button variant="primary" hx-get="/fragment.html" hx-target="#swap-target" hx-swap="innerHTML" > Fetch </bloom-button> <div id="swap-target"></div>
How it works
Auto-upgrade
Custom elements are part of the HTML parser. Any tag matching a
registered definition (like bloom-button) upgrades the
moment it lands in the DOM — whether by HTMX, innerHTML,
or any other insertion method. No lifecycle glue required.