"Sandboxing" HTMX?

[deanebarker]

I'm looking at HTMX as an option for small, embedded applications inside the UI of a larger application.

As such, I'm curious if anyone has done any research around how to definitively "sandbox" HTMX, meaning confine it to a specific element branch on a page, and not let it affect anything outside of it? Additionally, I'd like to make the swapped HTML "insert," meaning devoid of active scripting. My goal is to provide programming options only using HTMX attributes.

I've played around with some options involving interception of the new HTML via htmx:beforeSwap:

• "namespacing" any hx-target attribute by prepending the ID of the "sandbox" element, meaning all targets are essentially evaluated within the sandbox only
• Removal of all SCRIPT tags
• Removal of all attributes starting with on or hx-on
• "namingspacing" of any STYLE elements by enclosing the contained CSS in the sandbox element selector
• Shadowrooting the sandbox element

Etc. I'm sure there are a dozen other things I would need to do here.

But before I potentially reinvent this wheel, I'm curious if anyone else has done any research or prototyping around this? I think HTMX has unique value in this use case, because you can program without traditional aspect to JavaScript code. This means that I think we can keep the potential options within boundaries.