search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
37.59k stars 1.27k forks source link

HTMX & Lit #2298

Open NeoTRAN001 opened 7 months ago

NeoTRAN001 commented 7 months ago

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?

danielnieto commented 7 months ago

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/

dougmoscrop commented 7 months ago

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?

NeoTRAN001 commented 2 months ago

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?