Add a body class when htmx in initialized

[FatherShawn]

Recently I was using htmx to progressively enhance a form. In this use case I was building an interactive form powered by checkboxes. A click on a checkbox posted the form, updating the state of selected items.

I realized that if I know htmx was initialized so that my checkboxes could do their job, I could not display the form submit button for a simpler user experience. This was easily done with a small snippet that set a body class when htmx was defined. That also had the nice extra effect of progressively enhancing the form so that if JS was disabled for some reason so there was no htmx, the submit button was there and the form was still usable.

I am wondering how unique may case is and if we should add a line as htmx initializes to add a class to the body. I used htmx-active as my class.

[MichaelWest22]

htmx 4 does have a new feature where any element that is activated by htmx gets a custom data-htmx-powered attribute which is a good candidate for use with CSS. it is placed on the form or whatever is activated but you can style its children with the right selector

/* When htmx is active, data-htmx-powered is set on the form (or any htmx-powered ancestor).
   This hides the submit button for htmx users while keeping it visible when JS is disabled. */
.submit-btn { display: block; }
[data-htmx-powered] .submit-btn { display: none; }

[FatherShawn]

In my case HTMX is activated on checkbox. I want to make a summary area sticky and a submit button hidden in this case.

[MichaelWest22]

/* Progressive enhancement: these styles only apply when htmx is active */
body:has([data-htmx-powered]) .submit-btn {
    display: none;
}

body:has([data-htmx-powered]) .summary {
    position: sticky;
    top: 0;
}

I think you can do this with CSS like this.

[FatherShawn]

You can, and for this reason you may not wish to add this feature. But has() on the body tag is specifically called out in the MDN documentation.

This will cause the DOM tree processing and CSS recalculation on every HTMX insertion. Adding a class to the body at the conclusion of the initialization function is trivial in comparison.