Skip to content

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

Open
andrejota wants to merge 1 commit into
bigskysoftware:devfrom
andrejota:dev-shadow-root
Open

bodyContains: Walk up the nested shadow root chain to check if the body contains the element#2434
andrejota wants to merge 1 commit into
bigskysoftware:devfrom
andrejota:dev-shadow-root

Conversation

@andrejota
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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