bigskysoftware / bigskysoftware/htmx
Web Components (shadow DOM) issue when using HTMX websocket extension
- Dominant language
- JavaScript
- Stars
- 49.4k
- Forks
- 1.7k
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 30
Description
# Problem
The web components pattern from the HTMX documentation works fine for me in regular hx-get/hx-post cases.
I am unable, however, to make it work when using the websocket extension of HTMX for a form, button or any other element. The elements using the `ws-send` attribute inside the shadow DOM are not triggering any messages. Seems those elements are not properly recognized by the `ws-ext` extension, even after calling `htmx.process(shadow)`.
# Steps to reproduce
A full example with a button in light DOM, triggering properly, and a button in the shadow DOM, not triggering any messages.
```html
WS Light DOM
window.customElements.define(
"button-websocket",
class extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({ mode: "open" });
shadow.innerHTML = `<button hx-trigger="click" ws-send>WS Shadow DOM</button>`;
htmx.process(shadow);
}
},
);
```
A regular web component using hx-get/hx-post works just fine, btw. So I assume it's a problem with the websocket extension rather than htmx itself:
```html
window.customElements.define(
"button-regular",
class extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({ mode: "open" });
shadow.innerHTML = `<button hx-post="/increment">regular</button>`;
htmx.process(shadow);
}
},
);
```
Contributor guide
Assessment
This issue has not been assessed yet.