Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
In the web component documentation there is a reference to using 'host' to target the web components shadow DOM host element but this was never implemented as a valid target in htmx. So I've implemented this as a valid selector and added tests to confirm swapping it and elements outside the shadow DOM can be targeted for replacement.
There was a similar 'root' one implemented however from my testing this seems to not be usable for two reasons. First is that because the shadow root has a very different type called ShadowRoot which does not support most of the options a Node or Element would support which means swaps to this target fail when trying to add classes to the root. Also target has now been wrapped in asElement() which strips root target. So we should probably remove this non functional root selector as it is not documented anywhere either. The 'root' target could have been used by non web component use but this would make it return Document which is also not a Element so it gets stripped as well making it unusable here as well. So there should be no downside I can see if we remove 'root'.
Corresponding issue:
#2846
Testing
Wrote new tests to confirm it is working as expected plus did some manual testing in a test app to confirm Host replacment was working as expected.
Checklist
master
for website changes,dev
forsource changes)
approved via an issue
npm run test
) and verified that it succeeded