diff --git a/test/core/shadowdom.js b/test/core/shadowdom.js
new file mode 100644
index 00000000..7f3c3c32
--- /dev/null
+++ b/test/core/shadowdom.js
@@ -0,0 +1,1328 @@
+describe("Core HTMX shadow DOM Tests", function() {
+    //Skip these tests if browser doesn't support shadow DOM
+    if(typeof window.ShadowRoot === 'undefined') return;
+
+    beforeEach(function() {
+        this.server = makeServer();
+        clearWorkArea();
+        var workArea = getWorkArea()
+        if(!workArea.shadowRoot) workArea.attachShadow({ mode: 'open' })
+        workArea.shadowRoot.innerHTML = ""
+    });
+    afterEach(function()  {
+        this.server.restore();
+        clearWorkArea();
+        getWorkArea().shadowRoot.innerHTML = ""
+    });
+
+    // Locally redefine the `byId` and `make` functions to use shadow DOM
+    function byId(id) {
+      return getWorkArea().shadowRoot.getElementById(id) || document.getElementById(id)
+    }
+    function make(htmlStr) {
+      htmlStr =  htmlStr.trim()
+      var makeFn = function () {
+          var range = document.createRange();
+          var fragment = range.createContextualFragment(htmlStr);
+          var wa = getWorkArea().shadowRoot;
+          var child = null;
+          var children = fragment.children || fragment.childNodes; // IE
+          var appendedChildren = []
+          while(children.length > 0) {
+              child = children[0];
+              wa.appendChild(child);
+              appendedChildren.push(child)
+          }
+          htmx.process(wa);
+          return child; // return last added element
+      };
+      if (getWorkArea()) {
+          return makeFn();
+      } else {
+          ready(makeFn);
+      }
+    }
+
+    // bootstrap test
+    it('issues a GET request on click and swaps content', function()
+    {
+        this.server.respondWith("GET", "/test", "Clicked!");
+
+        var btn = make('<button hx-get="/test">Click Me!</button>')
+        btn.click();
+        this.server.respond();
+        btn.innerHTML.should.equal("Clicked!");
+    });
+
+    it('processes inner content properly', function()
+    {
+        this.server.respondWith("GET", "/test", '<a hx-get="/test2">Click Me</a>');
+        this.server.respondWith("GET", "/test2", "Clicked!");
+
+        var div = make('<div hx-get="/test"></div>')
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal('<a hx-get="/test2">Click Me</a>');
+        var a = div.querySelector('a');
+        a.click();
+        this.server.respond();
+        a.innerHTML.should.equal('Clicked!');
+    });
+
+    it('handles swap outerHTML properly', function()
+    {
+        this.server.respondWith("GET", "/test", '<a id="a1" hx-get="/test2">Click Me</a>');
+        this.server.respondWith("GET", "/test2", "Clicked!");
+
+        var div = make('<div id="d1" hx-get="/test" hx-swap="outerHTML"></div>')
+        div.click();
+        should.equal(byId("d1"), div);
+        this.server.respond();
+        should.equal(byId("d1"), null);
+        byId("a1").click();
+        this.server.respond();
+        byId("a1").innerHTML.should.equal('Clicked!');
+    });
+
+    it('handles beforebegin properly', function()
+    {
+        var i = 0;
+        this.server.respondWith("GET", "/test", function(xhr){
+            i++;
+            xhr.respond(200, {}, '<a id="a' + i + '" hx-get="/test2" hx-swap="innerHTML">' + i + '</a>');
+        });
+        this.server.respondWith("GET", "/test2", "*");
+
+        var div = make('<div hx-get="/test" hx-swap="beforebegin">*</div>')
+        var parent = div.parentElement;
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("*");
+        removeWhiteSpace(parent.innerText).should.equal("1*");
+
+        byId("a1").click();
+        this.server.respond();
+        removeWhiteSpace(parent.innerText).should.equal("**");
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("*");
+        removeWhiteSpace(parent.innerText).should.equal("*2*");
+
+        byId("a2").click();
+        this.server.respond();
+        removeWhiteSpace(parent.innerText).should.equal("***");
+    });
+
+    it('handles afterbegin properly', function()
+    {
+        var i = 0;
+        this.server.respondWith("GET", "/test", function(xhr){
+            i++;
+            xhr.respond(200, {}, "" + i);
+        });
+
+        var div = make('<div hx-get="/test" hx-swap="afterbegin">*</div>')
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("1*");
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("21*");
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("321*");
+    });
+
+    it('handles afterbegin properly with no initial content', function()
+    {
+        var i = 0;
+        this.server.respondWith("GET", "/test", function(xhr){
+            i++;
+            xhr.respond(200, {}, "" + i);
+        });
+
+        var div = make('<div hx-get="/test" hx-swap="afterbegin"></div>')
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("1");
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("21");
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("321");
+    });
+
+    it('handles afterend properly', function()
+    {
+        var i = 0;
+        this.server.respondWith("GET", "/test", function(xhr){
+            i++;
+            xhr.respond(200, {}, '<a id="a' + i + '" hx-get="/test2" hx-swap="innerHTML">' + i + '</a>');
+        });
+        this.server.respondWith("GET", "/test2", "*");
+
+        var div = make('<div hx-get="/test" hx-swap="afterend">*</div>')
+        var parent = div.parentElement;
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("*");
+        removeWhiteSpace(parent.innerText).should.equal("*1");
+
+        byId("a1").click();
+        this.server.respond();
+        removeWhiteSpace(parent.innerText).should.equal("**");
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("*");
+        removeWhiteSpace(parent.innerText).should.equal("*2*");
+
+        byId("a2").click();
+        this.server.respond();
+        removeWhiteSpace(parent.innerText).should.equal("***");
+    });
+
+    it('handles beforeend properly', function()
+    {
+        var i = 0;
+        this.server.respondWith("GET", "/test", function(xhr){
+            i++;
+            xhr.respond(200, {}, "" + i);
+        });
+
+        var div = make('<div hx-get="/test" hx-swap="beforeend">*</div>')
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("*1");
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("*12");
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("*123");
+    });
+
+    it('handles beforeend properly with no initial content', function()
+    {
+        var i = 0;
+        this.server.respondWith("GET", "/test", function(xhr){
+            i++;
+            xhr.respond(200, {}, "" + i);
+        });
+
+        var div = make('<div hx-get="/test" hx-swap="beforeend"></div>')
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("1");
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("12");
+
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("123");
+    });
+
+    it('handles hx-target properly', function()
+    {
+        this.server.respondWith("GET", "/test", "Clicked!");
+
+        var btn = make('<button hx-get="/test" hx-target="#s1">Click Me!</button>');
+        var target = make('<span id="s1">Initial</span>');
+        btn.click();
+        target.innerHTML.should.equal("Initial");
+        this.server.respond();
+        target.innerHTML.should.equal("Clicked!");
+    });
+
+    it('handles 204 NO CONTENT responses properly', function()
+    {
+        this.server.respondWith("GET", "/test", [204, {}, "No Content!"]);
+
+        var btn = make('<button hx-get="/test">Click Me!</button>');
+        btn.click();
+        btn.innerHTML.should.equal("Click Me!");
+        this.server.respond();
+        btn.innerHTML.should.equal("Click Me!");
+    });
+
+    it('handles 304 NOT MODIFIED responses properly', function()
+    {
+        this.server.respondWith("GET", "/test-1", [200, {}, "Content for Tab 1"]);
+        this.server.respondWith("GET", "/test-2", [200, {}, "Content for Tab 2"]);
+
+        var target = make('<div id="target"></div>')
+        var btn1 = make('<button hx-get="/test-1" hx-target="#target">Tab 1</button>');
+        var btn2 = make('<button hx-get="/test-2" hx-target="#target">Tab 2</button>');
+
+        btn1.click();
+        target.innerHTML.should.equal("");
+        this.server.respond();
+        target.innerHTML.should.equal("Content for Tab 1");
+
+        btn2.click();
+        this.server.respond();
+        target.innerHTML.should.equal("Content for Tab 2");
+
+        this.server.respondWith("GET", "/test-1", [304, {}, "Content for Tab 1"]);
+        this.server.respondWith("GET", "/test-2", [304, {}, "Content for Tab 2"]);
+
+        btn1.click();
+        this.server.respond();
+        target.innerHTML.should.equal("Content for Tab 1");
+
+        btn2.click();
+        this.server.respond();
+        target.innerHTML.should.equal("Content for Tab 2");
+    });
+
+    it('handles hx-trigger with non-default value', function()
+    {
+        this.server.respondWith("GET", "/test", "Clicked!");
+
+        var form = make('<form hx-get="/test" hx-trigger="click">Click Me!</form>');
+        form.click();
+        form.innerHTML.should.equal("Click Me!");
+        this.server.respond();
+        form.innerHTML.should.equal("Clicked!");
+    });
+
+    it('handles hx-trigger with load event', function()
+    {
+        this.server.respondWith("GET", "/test", "Loaded!");
+        var div = make('<div hx-get="/test" hx-trigger="load">Load Me!</div>');
+        div.innerHTML.should.equal("Load Me!");
+        this.server.respond();
+        div.innerHTML.should.equal("Loaded!");
+    });
+
+    it('sets the content type of the request properly', function (done) {
+        this.server.respondWith("GET", "/test", function(xhr){
+            xhr.respond(200, {}, "done");
+            xhr.overriddenMimeType.should.equal("text/html");
+            done();
+        });
+        var div = make('<div hx-get="/test">Click Me!</div>');
+        div.click();
+        this.server.respond();
+    });
+
+    it('issues two requests when clicked twice before response', function()
+    {
+        var i = 1;
+        this.server.respondWith("GET", "/test", function (xhr) {
+            xhr.respond(200, {}, "click " + i);
+            i++
+        });
+        var div = make('<div hx-get="/test"></div>');
+        div.click();
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("click 1");
+        this.server.respond();
+        div.innerHTML.should.equal("click 2");
+    });
+
+    it('issues two requests when clicked three times before response', function()
+    {
+        var i = 1;
+        this.server.respondWith("GET", "/test", function (xhr) {
+            xhr.respond(200, {}, "click " + i);
+            i++
+        });
+        var div = make('<div hx-get="/test"></div>');
+        div.click();
+        div.click();
+        div.click();
+        this.server.respondAll();
+        div.innerHTML.should.equal("click 2");
+    });
+
+    it('properly handles hx-select for basic situation', function()
+    {
+        var i = 1;
+        this.server.respondWith("GET", "/test", "<div id='d1'>foo</div><div id='d2'>bar</div>");
+        var div = make('<div hx-get="/test" hx-select="#d1"></div>');
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("<div id=\"d1\">foo</div>");
+    });
+
+    it('properly handles hx-select for full html document situation', function()
+    {
+        this.server.respondWith("GET", "/test", "<html><body><div id='d1'>foo</div><div id='d2'>bar</div></body></html>");
+        var div = make('<div hx-get="/test" hx-select="#d1"></div>');
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("<div id=\"d1\">foo</div>");
+    });
+
+    it('properly settles attributes on interior elements', function(done)
+    {
+        this.server.respondWith("GET", "/test", "<div hx-get='/test'><div width='bar' id='d1'></div></div>");
+        var div = make("<div hx-get='/test' hx-swap='outerHTML settle:10ms'><div id='d1'></div></div>");
+        div.click();
+        this.server.respond();
+        should.equal(byId("d1").getAttribute("width"), null);
+        setTimeout(function () {
+            should.equal(byId("d1").getAttribute("width"), "bar");
+            done();
+        }, 20);
+    });
+
+    it('properly settles attributes elements with single quotes in id', function(done)
+    {
+        this.server.respondWith("GET", "/test", "<div hx-get='/test'><div width='bar' id=\"d1'\"></div></div>");
+        var div = make("<div hx-get='/test' hx-swap='outerHTML settle:10ms'><div id=\"d1'\"></div></div>");
+        div.click();
+        this.server.respond();
+        should.equal(byId("d1'").getAttribute("width"), null);
+        setTimeout(function () {
+            should.equal(byId("d1'").getAttribute("width"), "bar");
+            done();
+        }, 20);
+    });
+
+    it('properly settles attributes elements with double quotes in id', function(done)
+    {
+        this.server.respondWith("GET", "/test", "<div hx-get='/test'><div width='bar' id='d1\"'></div></div>");
+        var div = make("<div hx-get='/test' hx-swap='outerHTML settle:10ms'><div id='d1\"'></div></div>");
+        div.click();
+        this.server.respond();
+        should.equal(byId("d1\"").getAttribute("width"), null);
+        setTimeout(function () {
+            should.equal(byId("d1\"").getAttribute("width"), "bar");
+            done();
+        }, 20);
+    });
+
+    it('properly handles multiple select input', function()
+    {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        var form = make('<form hx-post="/test" hx-trigger="click">' +
+            '<select id="multiSelect" name="multiSelect" multiple="multiple">'+
+            '<option id="m1" value="m1">m1</option>'+
+            '<option id="m2" value="m2">m2</option>'+
+            '<option id="m3" value="m3">m3</option>'+
+            '<option id="m4" value="m4">m4</option>'+
+            '</select>'+
+            '</form>');
+
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({});
+
+        byId("m1").selected = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({multiSelect:"m1"});
+
+        byId("m1").selected = true;
+        byId("m3").selected = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({multiSelect:["m1", "m3"]});
+    });
+
+    it('properly handles multiple select input when "multiple" attribute is empty string', function()
+    {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        var form = make('<form hx-post="/test" hx-trigger="click">' +
+            '<select name="multiSelect" id="id_question_list" multiple="" tabindex="-1" aria-hidden="true">' +
+            '<option id="m1" value="m1">m1</option>'+
+            '<option id="m2" value="m2">m2</option>'+
+            '<option id="m3" value="m3">m3</option>'+
+            '<option id="m4" value="m4">m4</option>'+
+            '</select>' +
+            '</form>');
+
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({});
+
+        byId("m1").selected = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({multiSelect:"m1"});
+
+        byId("m1").selected = true;
+        byId("m3").selected = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({multiSelect:["m1", "m3"]});
+    });
+
+    it('properly handles two multiple select inputs w/ same name', function()
+    {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        var form = make('<form hx-post="/test" hx-trigger="click">' +
+            '<select id="multiSelect" name="multiSelect" multiple="multiple">'+
+            '<option id="m1" value="m1">m1</option>'+
+            '<option id="m2" value="m2">m2</option>'+
+            '<option id="m3" value="m3">m3</option>'+
+            '<option id="m4" value="m4">m4</option>'+
+            '</select>'+
+            '<select id="multiSelect" name="multiSelect" multiple="multiple">'+
+            '<option id="m5" value="m5">m1</option>'+
+            '<option id="m6" value="m6">m2</option>'+
+            '<option id="m7" value="m7">m3</option>'+
+            '<option id="m8" value="m8">m4</option>'+
+            '</select>'+
+            '</form>');
+
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({});
+
+        byId("m1").selected = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({multiSelect:"m1"});
+
+        byId("m1").selected = true;
+        byId("m3").selected = true;
+        byId("m7").selected = true;
+        byId("m8").selected = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({multiSelect:["m1", "m3", "m7", "m8"]});
+    });
+
+    it('properly handles multiple email input', function()
+    {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        var form = make('<form hx-post="/test" hx-trigger="click">' +
+            '<input id="multiEmail" name="multiEmail" multiple>'+
+            '</form>');
+
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({multiEmail: ''});
+
+        byId("multiEmail").value = 'foo@example.com';
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({multiEmail:"foo@example.com"});
+
+        byId("multiEmail").value = 'foo@example.com,bar@example.com';
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({multiEmail:"foo@example.com,bar@example.com"});
+    });
+
+    it('properly handles checkbox inputs', function()
+    {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        var form = make('<form hx-post="/test" hx-trigger="click">' +
+            '<input id="cb1" name="c1" value="cb1" type="checkbox">'+
+            '<input id="cb2" name="c1" value="cb2" type="checkbox">'+
+            '<input id="cb3" name="c1" value="cb3" type="checkbox">'+
+            '<input id="cb4" name="c2" value="cb4"  type="checkbox">'+
+            '<input id="cb5" name="c2" value="cb5"  type="checkbox">'+
+            '<input id="cb6" name="c3" value="cb6"  type="checkbox">'+
+            '</form>');
+
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({});
+
+        byId("cb1").checked = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({c1:"cb1"});
+
+        byId("cb1").checked = true;
+        byId("cb2").checked = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({c1:["cb1", "cb2"]});
+
+        byId("cb1").checked = true;
+        byId("cb2").checked = true;
+        byId("cb3").checked = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({c1:["cb1", "cb2", "cb3"]});
+
+        byId("cb1").checked = true;
+        byId("cb2").checked = true;
+        byId("cb3").checked = true;
+        byId("cb4").checked = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({c1:["cb1", "cb2", "cb3"], c2:"cb4"});
+
+        byId("cb1").checked = true;
+        byId("cb2").checked = true;
+        byId("cb3").checked = true;
+        byId("cb4").checked = true;
+        byId("cb5").checked = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({c1:["cb1", "cb2", "cb3"], c2:["cb4", "cb5"]});
+
+        byId("cb1").checked = true;
+        byId("cb2").checked = true;
+        byId("cb3").checked = true;
+        byId("cb4").checked = true;
+        byId("cb5").checked = true;
+        byId("cb6").checked = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({c1:["cb1", "cb2", "cb3"], c2:["cb4", "cb5"], c3:"cb6"});
+
+        byId("cb1").checked = true;
+        byId("cb2").checked = false;
+        byId("cb3").checked = true;
+        byId("cb4").checked = false;
+        byId("cb5").checked = true;
+        byId("cb6").checked = true;
+        form.click();
+        this.server.respond();
+        values.should.deep.equal({c1:["cb1", "cb3"], c2:"cb5", c3:"cb6"});
+
+    });
+
+    it('text nodes dont screw up settling via variable capture', function()
+    {
+        this.server.respondWith("GET", "/test", "<div id='d1' hx-trigger='click consume' hx-get='/test2'></div>fooo");
+        this.server.respondWith("GET", "/test2", "clicked");
+        var div = make("<div hx-get='/test'/>");
+        div.click();
+        this.server.respond();
+        byId("d1").click();
+        this.server.respond();
+        byId("d1").innerHTML.should.equal("clicked");
+    });
+
+    it('script nodes evaluate', function()
+    {
+        var globalWasCalled = false;
+        window.callGlobal = function() {
+            globalWasCalled = true;
+        }
+        try {
+            this.server.respondWith("GET", "/test", "<div></div><script type='text/javascript'>callGlobal()</script>");
+            var div = make("<div hx-get='/test'></div>");
+            div.click();
+            this.server.respond();
+            globalWasCalled.should.equal(true);
+        } finally {
+            delete window.callGlobal;
+        }
+    });
+
+    it('stand alone script nodes evaluate', function()
+    {
+        var globalWasCalled = false;
+        window.callGlobal = function() {
+            globalWasCalled = true;
+        }
+        try {
+            this.server.respondWith("GET", "/test", "<script type='text/javascript'>callGlobal()</script>");
+            var div = make("<div hx-get='/test'></div>");
+            div.click();
+            this.server.respond();
+            globalWasCalled.should.equal(true);
+        } finally {
+            delete window.callGlobal;
+        }
+    });
+
+    it('script nodes can define global functions', function()
+    {
+        try {
+            window.foo = {}
+            this.server.respondWith("GET", "/test", "<script type='text/javascript'>foo.bar = function() { return 42 }</script>");
+            var div = make("<div hx-get='/test'></div>");
+            div.click();
+            this.server.respond();
+            foo.bar().should.equal(42);
+        } finally {
+            delete foo;
+        }
+    });
+
+    it('child script nodes evaluate when children', function()
+    {
+        var globalWasCalled = false;
+        window.callGlobal = function() {
+            globalWasCalled = true;
+        }
+        try {
+            this.server.respondWith("GET", "/test", "<div><script type='text/javascript'>callGlobal()</script></div>");
+            var div = make("<div hx-get='/test'></div>");
+            div.click();
+            this.server.respond();
+            globalWasCalled.should.equal(true);
+        } finally {
+            delete window.callGlobal;
+        }
+    });
+
+    it('child script nodes evaluate when first child', function()
+    {
+        var globalWasCalled = false;
+        window.callGlobal = function() {
+            globalWasCalled = true;
+        }
+        try {
+            this.server.respondWith("GET", "/test", "<script type='text/javascript'>callGlobal()</script><div></div>");
+            var div = make("<div hx-get='/test'></div>");
+            div.click();
+            this.server.respond();
+            globalWasCalled.should.equal(true);
+        } finally {
+            delete window.callGlobal;
+        }
+    });
+
+    it('child script nodes evaluate when not explicitly marked javascript', function()
+    {
+        var globalWasCalled = false;
+        window.callGlobal = function() {
+            globalWasCalled = true;
+        }
+        try {
+            this.server.respondWith("GET", "/test", "<div><script>callGlobal()</script></div>");
+            var div = make("<div hx-get='/test'></div>");
+            div.click();
+            this.server.respond();
+            globalWasCalled.should.equal(true);
+        } finally {
+            delete window.callGlobal;
+        }
+    });
+
+    it('script nodes do not evaluate when explicitly marked as something other than javascript', function()
+    {
+        var globalWasCalled = false;
+        window.callGlobal = function() {
+            globalWasCalled = true;
+        }
+        try {
+            this.server.respondWith("GET", "/test", "<div><script type='text/samplescript'>callGlobal()</script></div>");
+            var div = make("<div hx-get='/test'></div>");
+            div.click();
+            this.server.respond();
+            globalWasCalled.should.equal(false);
+        } finally {
+            delete window.callGlobal;
+        }
+    });
+
+    it('script nodes evaluate after swap', function()
+    {
+        window.callGlobal = function() {
+            console.log("Here...");
+            window.tempVal = byId("d1").innerText
+        }
+        try {
+            this.server.respondWith("GET", "/test", "<div><script>callGlobal()</script><div id='d1'>After settle...</div> </div>");
+            var div = make("<div hx-get='/test'></div>");
+            div.click();
+            this.server.respond();
+            window.tempVal.should.equal("After settle...");
+        } finally {
+            delete window.callGlobal;
+            delete window.tempVal;
+        }
+    });
+
+    it('script node exceptions do not break rendering', function()
+    {
+        this.skip("Rendering does not break, but the exception bubbles up and mocha reports it");
+        this.server.respondWith("GET", "/test", "clicked<script type='text/javascript'>throw 'foo';</script>");
+        var div = make("<div hx-get='/test'></div>");
+        div.click();
+        this.server.respond();
+        div.innerText.should.equal("clicked");
+        console.log(div.innerText);
+        console.log("here");
+    });
+
+    it('allows empty verb values', function()
+    {
+        var path = null;
+        var div = make("<div hx-get=''/>");
+        htmx.on(div, "htmx:configRequest", function (evt) {
+            path = evt.detail.path;
+            return false;
+        });
+        div.click();
+        this.server.respond();
+        path.should.not.be.null;
+    });
+
+    it('allows blank verb values', function()
+    {
+        var path = null;
+        var div = make("<div hx-get/>");
+        htmx.on(div, "htmx:configRequest", function (evt) {
+            path = evt.detail.path;
+            return false;
+        });
+        div.click();
+        this.server.respond();
+        path.should.not.be.null;
+    });
+
+    it('input values are not settle swapped (causes flicker)', function()
+    {
+        this.server.respondWith("GET", "/test", "<input id='i1' value='bar'/>");
+        var input = make("<input id='i1' hx-get='/test' value='foo' hx-swap='outerHTML settle:50' hx-trigger='click'/>");
+        input.click();
+        this.server.respond();
+        input = byId('i1');
+        input.value.should.equal('bar');
+    });
+
+    it('autofocus attribute works properly', function()
+    {
+        this.server.respondWith("GET", "/test", "<input id='i2' value='bar' autofocus/>");
+        var input = make("<input id='i1' hx-get='/test' value='foo' hx-swap='afterend' hx-trigger='click'/>");
+        input.focus();
+        input.click();
+        document.activeElement.should.equal(input);
+        this.server.respond();
+        var input2 = byId('i2');
+        document.activeElement.should.equal(input2);
+    });
+
+    it('autofocus attribute works properly w/ child', function()
+    {
+        this.server.respondWith("GET", "/test", "<div><input id='i2' value='bar' autofocus/></div>");
+        var input = make("<input id='i1' hx-get='/test' value='foo' hx-swap='afterend' hx-trigger='click'/>");
+        input.focus();
+        input.click();
+        document.activeElement.should.equal(input);
+        this.server.respond();
+        var input2 = byId('i2');
+        document.activeElement.should.equal(input2);
+    });
+
+    it('autofocus attribute works properly w/ true value', function()
+    {
+        this.server.respondWith("GET", "/test", "<div><input id='i2' value='bar' autofocus='true'/></div>");
+        var input = make("<input id='i1' hx-get='/test' value='foo' hx-swap='afterend' hx-trigger='click'/>");
+        input.focus();
+        input.click();
+        document.activeElement.should.equal(input);
+        this.server.respond();
+        var input2 = byId('i2');
+        document.activeElement.should.equal(input2);
+    });
+
+   it('multipart/form-data encoding works', function()
+    {
+        this.server.respondWith("POST", "/test", function(xhr){
+            should.equal(xhr.requestHeaders['Content-Type'], undefined);
+            if (xhr.requestBody.get) { //IE 11 does not support
+                xhr.requestBody.get("i1").should.equal('foo');
+            }
+            xhr.respond(200, {}, "body: " + xhr.requestBody);
+        });
+        var form = make("<form hx-post='/test' hx-encoding='multipart/form-data' hx-trigger='click'>" +
+            "<input name='i1'  id='i1' value='foo'/>" +
+            "</form>");
+        form.focus();
+        form.click();
+        this.server.respond();
+    });
+
+    it('removed elements do not issue requests', function()
+    {
+        var count = 0;
+        this.server.respondWith("GET", "/test", function (xhr) {
+            count++;
+            xhr.respond(200, {}, "");
+        });
+        var btn = make('<button hx-get="/test">Click Me!</button>')
+        htmx.remove(btn);
+        btn.click();
+        this.server.respond();
+        count.should.equal(0);
+    });
+
+    it('title tags update title', function()
+    {
+        this.server.respondWith("GET", "/test", function (xhr) {
+            xhr.respond(200, {}, "<title class=''>htmx rocks!</title>Clicked!");
+        });
+        var btn = make('<button hx-get="/test">Click Me!</button>')
+        btn.click();
+        this.server.respond();
+        btn.innerText.should.equal("Clicked!");
+        window.document.title.should.equal("htmx rocks!");
+    });
+
+    it('svg title tags do not update title', function()
+    {
+        var originalTitle = window.document.title
+        this.server.respondWith("GET", "/test", function (xhr) {
+            xhr.respond(200, {}, "<svg class=''><title>" + originalTitle + "UPDATE" + "</title></svg>Clicked!");
+        });
+        var btn = make('<button hx-get="/test">Click Me!</button>')
+        btn.click();
+        this.server.respond();
+        btn.innerText.should.equal("Clicked!");
+        window.document.title.should.equal(originalTitle);
+    });
+
+    it('first title tag outside svg title tags updates title', function()
+    {
+        var originalTitle = window.document.title
+        var newTitle = originalTitle + "!!!";
+        this.server.respondWith("GET", "/test", function (xhr) {
+            xhr.respond(200, {}, "<title class=''>" + newTitle + "</title><svg class=''><title>foo</title></svg>Clicked!<title class=''>x</title>");
+        });
+        var btn = make('<button hx-get="/test">Click Me!</button>')
+        btn.click();
+        this.server.respond();
+        btn.innerText.should.equal("Clicked!");
+        window.document.title.should.equal(newTitle);
+    });
+
+    it('title update does not URL escape', function()
+    {
+        this.server.respondWith("GET", "/test", function (xhr) {
+            xhr.respond(200, {}, "<title>&lt;/> htmx rocks!</title>Clicked!");
+        });
+        var btn = make('<button hx-get="/test">Click Me!</button>')
+        btn.click();
+        this.server.respond();
+        btn.innerText.should.equal("Clicked!");
+        window.document.title.should.equal("</> htmx rocks!");
+    });
+
+    it('by default 400 content is not swapped', function()
+    {
+        this.server.respondWith("GET", "/test", function (xhr) {
+            xhr.respond(400, {}, "Clicked!");
+        });
+        var btn = make('<button hx-get="/test">Click Me!</button>')
+        btn.click();
+        this.server.respond();
+        btn.innerText.should.equal("Click Me!");
+    });
+
+    it('400 content can be swapped if configured to do so', function()
+    {
+        var handler = htmx.on("htmx:beforeSwap", function (event) {
+            if (event.detail.xhr.status === 400) {
+                event.detail.shouldSwap = true;
+            }
+        });
+
+        this.server.respondWith("GET", "/test", function (xhr) {
+            xhr.respond(400, {}, "Clicked!");
+        });
+        var btn = make('<button hx-get="/test">Click Me!</button>')
+        btn.click();
+        this.server.respond();
+        btn.innerText.should.equal("Clicked!");
+        htmx.off("htmx:beforeSwap", handler);
+    });
+
+    it('400 content can be retargeted if configured to do so', function()
+    {
+        var handler = htmx.on("htmx:beforeSwap", function (event) {
+            if (event.detail.xhr.status === 400) {
+                event.detail.shouldSwap = true;
+                event.detail.target = byId('d1')
+            }
+        });
+
+        this.server.respondWith("GET", "/test", function (xhr) {
+            xhr.respond(400, {}, "Clicked!");
+        });
+        var btn = make('<button hx-get="/test">Click Me!</button>')
+        var div = make('<div id="d1"></div>')
+        btn.click();
+        this.server.respond();
+        div.innerText.should.equal("Clicked!");
+        htmx.off("htmx:beforeSwap", handler);
+    });
+
+    it('errors are triggered only on 400+', function()
+    {
+        var errors = 0;
+        var handler = htmx.on("htmx:responseError", function(){
+            errors++;
+        })
+        this.server.respondWith("GET", "/test1", function (xhr) {
+            xhr.respond(204, {}, "Clicked!");
+        });
+        this.server.respondWith("GET", "/test2", function (xhr) {
+            xhr.respond(400, {}, "Clicked!");
+        });
+        var btn1 = make('<button hx-get="/test1">Click Me!</button>')
+        var btn2 = make('<button hx-get="/test2">Click Me!</button>')
+        btn1.click();
+        btn2.click();
+        this.server.respond();
+        this.server.respond();
+        errors.should.equal(1);
+        htmx.off("htmx:responseError", handler);
+    });
+
+
+    it('content can be modified if configured to do so', function()
+    {
+        var handler = htmx.on("htmx:beforeSwap", function (event) {
+            if (event.detail.xhr.status === 400) {
+                event.detail.shouldSwap = true;
+                event.detail.serverResponse = event.detail.serverResponse + "!!";
+            }
+        });
+
+        this.server.respondWith("GET", "/test", function (xhr) {
+            xhr.respond(400, {}, "Clicked!");
+        });
+        var btn = make('<button hx-get="/test">Click Me!</button>')
+        btn.click();
+        this.server.respond();
+        btn.innerText.should.equal("Clicked!!!");
+        htmx.off("htmx:beforeSwap", handler);
+    });
+
+    it('scripts w/ src attribute are properly loaded', function(done)
+    {
+        try {
+            this.server.respondWith("GET", "/test", "<script id='setGlobalScript' src='setGlobal.js'></script>");
+            var div = make("<div hx-get='/test'></div>");
+            div.click();
+            this.server.respond();
+            byId("setGlobalScript").addEventListener("load", function () {
+                window.globalWasCalled.should.equal(true);
+                delete window.globalWasCalled;
+                done();
+            })
+        } finally {
+            delete window.globalWasCalled;
+        }
+    });
+
+    it('should load tags with colon in their names', function() {
+        this.server.respondWith('GET', '/test', '<with:colon id="foobar">Foobar</with:colon>');
+
+        var btn = make('<button hx-get="/test">Give me colons!</button>');
+        btn.click();
+        this.server.respond();
+
+        btn.innerHTML.should.equal('<with:colon id="foobar">Foobar</with:colon>');
+    });
+
+    it('properly handles clicked submit button with a value inside a htmx form', function () {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        make('<form hx-post="/test">' +
+            '<input type="text" name="t1" value="textValue">' +
+            '<button id="submit" type="submit" name="b1" value="buttonValue">button</button>' +
+            '</form>');
+
+        byId("submit").click();
+        this.server.respond();
+        values.should.deep.equal({t1: 'textValue', b1: 'buttonValue'});
+    })
+
+    it('properly handles clicked submit input with a value inside a htmx form', function () {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        make('<form hx-post="/test">' +
+            '<input type="text" name="t1" value="textValue">' +
+            '<input id="submit" type="submit" name="b1" value="buttonValue">' +
+            '</form>');
+
+        byId("submit").click();
+        this.server.respond();
+        values.should.deep.equal({t1: 'textValue', b1: 'buttonValue'});
+    })
+
+    it('properly handles clicked submit button with a value inside a non-htmx form', function () {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        make('<form>' +
+            '<input type="text" name="t1" value="textValue">' +
+            '<button id="submit" type="submit" name="b1" value="buttonValue" hx-post="/test">button</button>' +
+            '</form>');
+
+        byId("submit").click();
+        this.server.respond();
+        values.should.deep.equal({t1: 'textValue', b1: 'buttonValue'});
+    })
+
+    it('properly handles clicked submit input with a value inside a non-htmx form', function () {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        make('<form>' +
+            '<input type="text" name="t1" value="textValue">' +
+            '<input id="submit" type="submit" name="b1" value="buttonValue" hx-post="/test">' +
+            '</form>');
+
+        byId("submit").click();
+        this.server.respond();
+        values.should.deep.equal({t1: 'textValue', b1: 'buttonValue'});
+    })
+
+    it('properly handles clicked submit button with a value outside a htmx form', function () {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        make('<form id="externalForm" hx-post="/test">' +
+            '<input type="text" name="t1" value="textValue">' +
+            '</form>' +
+            '<button id="submit" form="externalForm" type="submit" name="b1" value="buttonValue">button</button>');
+
+        byId("submit").click();
+        this.server.respond();
+        values.should.deep.equal({t1: 'textValue', b1: 'buttonValue'});
+    })
+
+    it('properly handles clicked submit input with a value outside a htmx form', function () {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        make('<form id="externalForm" hx-post="/test">' +
+            '<input type="text" name="t1" value="textValue">' +
+            '</form>' +
+            '<input id="submit" form="externalForm" type="submit" name="b1" value="buttonValue">');
+
+        byId("submit").click();
+        this.server.respond();
+        values.should.deep.equal({t1: 'textValue', b1: 'buttonValue'});
+    })
+
+    it('properly handles clicked submit button with a value stacking with regular input', function () {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        make('<form hx-post="/test">' +
+            '<input type="hidden" name="action" value="A">' +
+            '<button id="btnA" type="submit">A</button>' +
+            '<button id="btnB" type="submit" name="action" value="B">B</button>' +
+            '<button id="btnC" type="submit" name="action" value="C">C</button>' +
+            '</form>');
+
+        byId("btnA").click();
+        this.server.respond();
+        values.should.deep.equal({action: 'A'});
+
+        byId("btnB").click();
+        this.server.respond();
+        values.should.deep.equal({action: ['A', 'B']});
+
+        byId("btnC").click();
+        this.server.respond();
+        values.should.deep.equal({action: ['A', 'C']});
+    })
+
+    it('properly handles clicked submit input with a value stacking with regular input', function () {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        make('<form hx-post="/test">' +
+            '<input type="hidden" name="action" value="A">' +
+            '<input id="btnA" type="submit">A</input>' +
+            '<input id="btnB" type="submit" name="action" value="B">B</input>' +
+            '<input id="btnC" type="submit" name="action" value="C">C</input>' +
+            '</form>');
+
+        byId("btnA").click();
+        this.server.respond();
+        values.should.deep.equal({action: 'A'});
+
+        byId("btnB").click();
+        this.server.respond();
+        values.should.deep.equal({action: ['A', 'B']});
+
+        byId("btnC").click();
+        this.server.respond();
+        values.should.deep.equal({action: ['A', 'C']});
+    })
+
+    it('properly handles clicked submit button with a value inside a form, referencing another form', function () {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        make('<form id="externalForm" hx-post="/test">' +
+            '<input type="text" name="t1" value="textValue">' +
+            '<input type="hidden" name="b1" value="inputValue">' +
+            '</form>' +
+            '<form hx-post="/test2">' +
+            '<button id="submit" form="externalForm" type="submit" name="b1" value="buttonValue">button</button>' +
+            '</form>');
+
+        byId("submit").click();
+        this.server.respond();
+        values.should.deep.equal({t1: 'textValue', b1: ['inputValue', 'buttonValue']});
+    })
+
+    it('properly handles clicked submit input with a value inside a form, referencing another form', function () {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        make('<form id="externalForm" hx-post="/test">' +
+            '<input type="text" name="t1" value="textValue">' +
+            '<input type="hidden" name="b1" value="inputValue">' +
+            '</form>' +
+            '<form hx-post="/test2">' +
+            '<input id="submit" form="externalForm" type="submit" name="b1" value="buttonValue">' +
+            '</form>');
+
+        byId("submit").click();
+        this.server.respond();
+        values.should.deep.equal({t1: 'textValue', b1: ['inputValue', 'buttonValue']});
+    })
+
+    it('properly handles inputs external to form', function () {
+        var values;
+        this.server.respondWith("Post", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(204, {}, "");
+        });
+
+        make('<form id="externalForm" hx-post="/test">' +
+            '   <input type="hidden" name="b1" value="inputValue">' +
+            '</form>' +
+            '<input type="text" name="t1" value="textValue" form="externalForm">' +
+            '<select name="s1" form="externalForm">' +
+            '   <option value="someValue"></option>' +
+            '   <option value="selectValue" selected></option>' +
+            '</select>' +
+            '<button id="submit" form="externalForm" type="submit" name="b1" value="buttonValue">button</button>');
+
+        byId("submit").click();
+        this.server.respond();
+        values.should.deep.equal({t1: 'textValue', b1: ['inputValue', 'buttonValue'], s1: "selectValue"});
+    })
+
+    it('handles form post with button formmethod dialog properly', function () {
+        var values;
+        this.server.respondWith("POST", "/test", function (xhr) {
+            values = getParameters(xhr);
+            xhr.respond(200, {}, "");
+        });
+
+        make('<dialog><form hx-post="/test"><button id="submit" formmethod="dialog" name="foo" value="bar">submit</button></form></dialog>');
+
+        byId("submit").click();
+        this.server.respond();
+        values.should.deep.equal({ foo: 'bar' });
+    })
+
+    it('handles form get with button formmethod dialog properly', function () {
+        var responded = false;
+        this.server.respondWith("GET", "/test", function (xhr) {
+            responded = true;
+            xhr.respond(200, {}, "");
+        });
+
+        make('<dialog><form hx-get="/test"><button id="submit" formmethod="dialog">submit</button></form></dialog>');
+
+        byId("submit").click();
+        this.server.respond();
+        responded.should.equal(true);
+    })
+
+    it("can associate submit buttons from outside a form with the current version of the form after swap", function(){
+        const template = '<form ' +
+              'id="hello" ' +
+              'hx-target="#hello" ' +
+              'hx-select="#hello" ' +
+              'hx-swap="outerHTML" ' +
+              'hx-post="/test">\n' +
+              '<input id="input" type="text" name="name" />\n' +
+              '<button name="value" type="submit">Submit</button>\n' +
+              '</form>\n' +
+              '<button id="outside" name="outside" form="hello" type="submit">Outside</button>';
+
+        var values
+        this.server.respondWith("/test", function (xhr) {
+          values = getParameters(xhr);
+          xhr.respond(200, {}, template);
+        });
+        make(template);
+        const button = byId("outside");
+        button.focus();
+        button.click();
+        this.server.respond();
+        values.should.deep.equal({name: "", outside: ""});
+        button.focus();
+        button.click();
+        this.server.respond();
+        values.should.deep.equal({name: "", outside: ""});
+    })
+})
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 6559420a..d02893af 100644
--- a/test/index.html
+++ b/test/index.html
@@ -64,6 +64,7 @@
 <script src="core/headers.js"></script>
 <script src="core/regressions.js"></script>
 <script src="core/security.js"></script>
+<script src="core/shadowdom.js"></script>
 <script src="core/perf.js"></script>
 <script src="core/validation.js"></script>
 <script src="core/tokenizer.js"></script>