Hmm that sounds interesting, I have also had some success embedding the client js code in the html file. I can attach an event listener. But when I make the post back to the suitelet its returning some html with an error message:

"name":"WRONG_PARAMETER_TYPE","message":"Wrong parameter type: output is expected as undefined. "

my code client code kinda looks like this:

<script>
const processForm = (e) => {
    if (e.preventDefault) e.preventDefault();
    
    var search = document.getElementById('search').value;
    if (search === "") {
    	document.getElementById('results').innerHTML ="<h2>Enter a value above to search.</h2>";
    	document.getElementById("loader").style.display = "hide";
    	return false;
    }
    
    // show loader
    document.getElementById("loader").style.display = "block";
    
    var url  = "/app/site/hosting/scriptlet.nl?script=920&deploy=1";

    var data = {};
    //data.firstname = "John";
    //data.lastname  = "Snow";
    var json = JSON.stringify(data);
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
    xhr.onload = function () {
    	console.log(xhr.responseText);
    }
    xhr.send(json);
    
    
    // You must return false to prevent the default form behavior
    return false;
}

var submit = document.getElementById('submit');
if (submit.attachEvent) {
	submit.attachEvent("click", processForm);
} else {
	submit.addEventListener("click", processForm);
}
</script>

With this method I am not really doing any DOM manipulation of the entire document, just the part that I have defined in the suitelet.