Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bodyContains: Walk up the nested shadow root chain to check if the body contains the element #2434

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

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

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.

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