htmx HTMX & Lit

I have a question regarding the use of htmx in Lit. There are questions related to the integration with web components, I would like to know if it is possible to integrate HTMX within Lit (https://lit.dev/)

I came across two issues that address this issue: pull (https://github.com/bigskysoftware/htmx/pull/2283) issues (https://github.com/bigskysoftware/htmx/issues/2079)

Could you please let me know if there are examples available for using HTMX inside Shadow DOM with Lit, if it is really possible?

Feb 09 '24 16:02 NeoTRAN001

The current version of HTMX doesn't work with Shadow DOM, however the (soon to be released) next major release will support it:

https://v2-0v2-0.htmx.org/posts/2024-01-26-htmx-2-0-0-alpha1-is-released/

Feb 10 '24 06:02 danielnieto

I'm able to use the alpha1/alpha2 with Lit 3.0, by calling htmx.process(this.shadowRoot) in updated()

It works for a root-level custom element - but if the HTMX response includes another custom element, the custom element loads, runs fine, calls updated() which also calls htmx.process(this.shadowRoot) but nothing htmx-side happens, is this an expected limitation or am I doing something obviously wrong?

Feb 15 '24 15:02 dougmoscrop

As mentioned, you can use an HTMX within a component, as long as it is the root of the project. If I have components nested there, HTMX stops working.

How can one address this issue of having nested shadowroot?

Jul 20 '24 18:07 NeoTRAN001