htmx 2.0 support for pre-compiled WebComponents

[mfdewit]

Hi,

Great to see an update of htmx! In our current project we are happily using it. We only have some problems integrating with webcomponents. So I was happy when I read the release notes were it is mentioned that webcomponent support was 'dramatically improved' :)

But this example documentation expects us to control the webcomponent source:
https://htmx.org/examples/web-components

Is htmx.process() also usable when we are using pre-compiled webcomponents? Or is this technically impossible due to the fact that you cannot control on which shadow element the htmx attributes must be placed?

[frederikb]

Hi @mfdewit, did you proceed with any experiments?

I briefly played around with HTMX with Web Components some time ago and ran into some challenges:

• in general you will not be able to profit from any defaults and special behavior applied to the different types of input elements or butts (e.g.,

  htmx/src/htmx.js

  Line 2320 in 1ef814b

  if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {

  htmx/src/htmx.js

  Line 2221 in 1ef814b

  } else if (matches(elt, 'input[type="button"], input[type="submit"]')) {

  ) because HTMX won't see these elements inside of the shadow DOM
• HTMX will not include the values of input elements of your custom elements (which are again hidden inside of their shadow DOM) unless
  • your web components either take care of contributing to the form data by handling the formdata event
  • your web components are fully integrated as form elements (see https://www.dannymoerkerke.com/blog/web-components-can-now-be-native-form-elements/ )
  • you including the values/elements manually in HTMX
  • you write an HTMX extension similarily to this Shoelace one to add support for all of your web components (see https://github.com/benopotamus/htmx-ext-shoelace/blob/main/htmx.ext.shoelace.js )

But that's only my naive understanding form 30 minutes of HTMX use. I would be glad if a constributor could help us out with their perspective.