Skip to content

Conversation

@MichaelWest22
Copy link
Collaborator

@MichaelWest22 MichaelWest22 commented Jun 19, 2025

Description

This is a possible enhancement Jeremy Howard suggested. When doing outerHTML oob swaps there are situations where you may want to replace an element on the page with multiple nodes and this is currently not possible with outerHTML oob swaps as they can only replace it with a single node. This proposed change would add a new swap type outerHTMLStrip that strips the encapsulating tag during swap like all the inner swap styles do but performs a outerHTML swap to replace the target with all the inner contents of the oob tagged element.

<div id="foo" hx-swap-oob="outerHTMLStrip">
  <div id="foo2">
    One thing
  </div>
  <div>
    Another thing
  </div>
</div>

While I found you can do this sometimes with the following response currently:

<div id="foo2" hx-swap-oob="outerHTML:#foo">
    One thing
</div>
</div hx-swap-oob="afterend:#foo2:>
  <div>
    Another thing
  </div>
</div>

Which will have the same results but it is much harder to discover or understand than just being able to control the tag stripping of the outerHTML swap

To implement this feature I just add this new outerHTMLStrip swap style support by letting this swap style be detected as a non inline swap style which means the parent of the swap data becomes the content itself instead of a wrapping fragment so it uses inner content for the swap and then we just remove the word "Strip" from the swap style to allow it to be processed as outerHTML.

Another related fix I've included is to get the none inline swaps inner content assignment has a bug where template tags are broken as they have .content and not normal inner content nodes. So just adding support for template.content and falling back to the old way if its not a template solves this issue

This allows more generic use of oob swaps in templating libraries as you can just use template tags like this now:

<template id="foo" hx-swap-oob="outerHTMLStrip">
  <div id="foo2">
    One thing
  </div>
  <div>
    Another thing
  </div>
</template>

This allows you to ignore the troublesome tables issues that are a real pain to debug as template tags can contain any element type and you don't have to match the encapsulating tag to be the perfect

tag type to match the content type to avoid issues.

Existing wrapping use cases work the same as before after this change it just adds more template tag support.

Possible Changes:

The swap name outerHTMLStrip could be renamed to something else if a better alternative name can be found
Could split this into two separate PR's

Also I found
Corresponding issue:
#3316

Testing

Added new tests and ran full test suite

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

@MichaelWest22 MichaelWest22 added the enhancement New feature or request label Jun 19, 2025
@MichaelWest22
Copy link
Collaborator Author

closing this old idea in favor of #3352

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant