Skip to content

Conversation

andrejota
Copy link
Contributor

Description

bodyContains() currently assumes that shadow root host element is always contained in the root body. That may not be the case and I experienced problem when nesting web components that rely on HTMX (e.g. hx-get. This change walks up the chain of shadow roots to find the topmost host element and verify for that one if it exists in the root body.

I did not find a corresponding issue, but I did find an older related issue: #718. I didn't file a new issue as it looks like a fairly straight-forward fix for what I think is just a bug.

Testing

I ran this with my test site which uses nested web components ('open' shadow DOM) combined with HTMX. This change enabled hx-get="..." with hx-target="click" to work for me.

Checklist

  • I have read the contribution guidelines
  • I have targeted this PR against the correct branch (master for website changes, dev for
    source changes)
  • This is either a bugfix, a documentation update, or a new feature that has been explicitly
    approved via an issue
  • I ran the test suite locally (npm run test) and verified that it succeeded

…ement.

bodyContains() currently assumes that shadow root host element is always
contained in the root body. This change walks up the chain of shadow roots to
find the topmost host element and verify for that one if it exists in the root
body.
@jackielii
Copy link
Contributor

I'm having this issue in 2.0.0-beta4. I have a simple post button:

<button
	hx-post={ formatUrl("/workflows/%s/runs", props.WorkflowName) }
	hx-target="body"
	hx-push-url="true"
>Run</button>

This returns the entire html, thus replacing "body". In version 1.9, there's no error, but in 2.0.0-beta4. I get "htmx:swapError"

image

@Telroshan
Copy link
Collaborator

Hey, following up late on this @andrejota, could you fix your code's formatting (npm run format) to pass the CI? Thanks!

Ideally, adding a test case would greatly help to identify & ensure the issue is indeed fixed and doesn't get broken again in the future

@andrejota
Copy link
Contributor Author

Hey, following up late on this @andrejota, could you fix your code's formatting (npm run format) to pass the CI? Thanks!

Ideally, adding a test case would greatly help to identify & ensure the issue is indeed fixed and doesn't get broken again in the future

Yup, happy to do it. On it.

@Telroshan
Copy link
Collaborator

Hey @andrejota , we had a recent PR that addressed the nested shadow roots issue, see #3034 (released alongside htmx 2.0.4)
Could you confirm if that solves the issue here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs rebase/retarget needs test PR needs a test
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants