bigskysoftware
HTMX & webcomponent
I have a question regarding the usage of htmx in web components. It appears that htmx may not support Shadow DOM.
I have come across two related GitHub issues that discuss this matter: Issue (https://github.com/bigskysoftware/htmx/issues/647) Issue (https://github.com/bigskysoftware/htmx/issues/997)
Could you please let me know if there are any examples available for using HTMX within the Shadow DOM, if it is indeed possible?
Yes, you can, but with a few slight differences in application.
You can load htmx from the node_modules.
import htmx from "../../../node_modules/htmx.org"
You can then call htmx.ajax from handlers (onClick), via event listeners, etc. You actually have more options this way.
htmx.ajax('PUT', '/todos/' + event.detail, { target: '#todo-' + event.detail, target: '#todo-list', swap:'beforebegin' });
In the above, event.detail is a string of the ID, emitted by the onClick handler of the done checkbox of a todo-item. The listener is in a todo-list web component that is a simple wrapper, mostly to contain the js/ts code.
Is it as "elegant" as hx-put="" hx-target="" hx-swap="" directly on the button? Perhaps not. But it does work and you actually have a bit, in my opinion, finer control.
I'm using htmx with StencilJS and the presence of a shadow DOM is NOT an issue, just a slightly different approach when you're inside a web component than when you are in native HTML.
Your mileage may vary.
HTMX now works in Shadow DOM on the v2.0v2.0 branch, pending a full release in 2.0. See the merged PR for details: #2075.
