From f5b02eb76fdd59e72d9690d9c3d33ac7abcf46e1 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Fri, 12 Apr 2024 11:22:39 -0400
Subject: [PATCH] Improve morph support for `<template>` elements

Closes [#15][]

When morphing `<template>` elements, treat the [DocumentFragment][]
instances returned from the [HTMLTemplateElement.content][] properties
as `morphChildren` methods' `newParent` and `oldParent` variables.

That way, descendant nodes can be iterated across the
connected-disconnected boundary.

[#15]: https://github.com/bigskysoftware/idiomorph/issues/15
[DocumentFragment]:
[HTMLTemplateElement.content]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content
---
 dist/idiomorph-ext.js     |   8 ++++++--
 dist/idiomorph-ext.min.js |   2 +-
 dist/idiomorph-htmx.js    |   2 +-
 dist/idiomorph.amd.js     |   4 ++++
 dist/idiomorph.cjs.js     |   4 ++++
 dist/idiomorph.esm.js     |   4 ++++
 dist/idiomorph.js         |   6 +++++-
 dist/idiomorph.min.js     |   2 +-
 dist/idiomorph.min.js.gz  | Bin 2667 -> 2690 bytes
 src/idiomorph.js          |   4 ++++
 test/core.js              |   8 ++++++++
 11 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/dist/idiomorph-ext.js b/dist/idiomorph-ext.js
index d6922db..5e5cec0 100644
--- a/dist/idiomorph-ext.js
+++ b/dist/idiomorph-ext.js
@@ -110,7 +110,7 @@ var Idiomorph = (function () {
          * @returns {boolean}
          */
         function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
-            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement;
+            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement && possibleActiveElement !== document.body;
         }
 
         /**
@@ -177,6 +177,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;
@@ -860,7 +864,7 @@ var Idiomorph = (function () {
     htmx.defineExtension('morph', {
         isInlineSwap: function(swapStyle) {
             let config = createMorphConfig(swapStyle);
-            return config.swapStyle === "outerHTML" || config.swapStyle == null;
+            return config?.morphStyle === "outerHTML" || config?.morphStyle == null;
         },
         handleSwap: function (swapStyle, target, fragment) {
             let config = createMorphConfig(swapStyle);
diff --git a/dist/idiomorph-ext.min.js b/dist/idiomorph-ext.min.js
index c21426d..b8bb33b 100644
--- a/dist/idiomorph-ext.min.js
+++ b/dist/idiomorph-ext.min.js
@@ -1 +1 @@
-var Idiomorph=function(){"use strict";let o=new Set;let n={morphStyle:"outerHTML",callbacks:{beforeNodeAdded:t,afterNodeAdded:t,beforeNodeMorphed:t,afterNodeMorphed:t,beforeNodeRemoved:t,afterNodeRemoved:t,beforeAttributeUpdated:t},head:{style:"merge",shouldPreserve:function(e){return e.getAttribute("im-preserve")==="true"},shouldReAppend:function(e){return e.getAttribute("im-re-append")==="true"},shouldRemove:t,afterHeadMorphed:t}};function e(e,t,n={}){if(e instanceof Document){e=e.documentElement}if(typeof t==="string"){t=y(t)}let l=M(t);let r=m(e,l,n);return a(e,l,r)}function a(r,i,o){if(o.head.block){let t=r.querySelector("head");let n=i.querySelector("head");if(t&&n){let e=c(n,t,o);Promise.all(e).then(function(){a(r,i,Object.assign(o,{head:{block:false,ignore:true}}))});return}}if(o.morphStyle==="innerHTML"){l(i,r,o);return r.children}else if(o.morphStyle==="outerHTML"||o.morphStyle==null){let e=N(i,r,o);let t=e?.previousSibling;let n=e?.nextSibling;let l=d(r,e,o);if(e){return k(t,l,n)}else{return[]}}else{throw"Do not understand how to morph style "+o.morphStyle}}function u(e,t){return t.ignoreActiveValue&&e===document.activeElement}function d(e,t,n){if(n.ignoreActive&&e===document.activeElement){}else if(t==null){if(n.callbacks.beforeNodeRemoved(e)===false)return e;e.remove();n.callbacks.afterNodeRemoved(e);return null}else if(!g(e,t)){if(n.callbacks.beforeNodeRemoved(e)===false)return e;if(n.callbacks.beforeNodeAdded(t)===false)return e;e.parentElement.replaceChild(t,e);n.callbacks.afterNodeAdded(t);n.callbacks.afterNodeRemoved(e);return t}else{if(n.callbacks.beforeNodeMorphed(e,t)===false)return e;if(e instanceof HTMLHeadElement&&n.head.ignore){}else if(e instanceof HTMLHeadElement&&n.head.style!=="morph"){c(t,e,n)}else{r(t,e,n);if(!u(e,n)){l(t,e,n)}}n.callbacks.afterNodeMorphed(e,t);return e}}function l(n,l,r){let i=n.firstChild;let o=l.firstChild;let a;while(i){a=i;i=a.nextSibling;if(o==null){if(r.callbacks.beforeNodeAdded(a)===false)return;l.appendChild(a);r.callbacks.afterNodeAdded(a);x(r,a);continue}if(b(a,o,r)){d(o,a,r);o=o.nextSibling;x(r,a);continue}let e=S(n,l,a,o,r);if(e){o=v(o,e,r);d(e,a,r);x(r,a);continue}let t=A(n,l,a,o,r);if(t){o=v(o,t,r);d(t,a,r);x(r,a);continue}if(r.callbacks.beforeNodeAdded(a)===false)return;l.insertBefore(a,o);r.callbacks.afterNodeAdded(a);x(r,a)}while(o!==null){let e=o;o=o.nextSibling;w(e,r)}}function f(e,t,n,l){if(e==="value"&&l.ignoreActiveValue&&t===document.activeElement){return true}return l.callbacks.beforeAttributeUpdated(e,t,n)===false}function r(t,n,l){let e=t.nodeType;if(e===1){const r=t.attributes;const i=n.attributes;for(const o of r){if(f(o.name,n,"update",l)){continue}if(n.getAttribute(o.name)!==o.value){n.setAttribute(o.name,o.value)}}for(let e=i.length-1;0<=e;e--){const a=i[e];if(f(a.name,n,"remove",l)){continue}if(!t.hasAttribute(a.name)){n.removeAttribute(a.name)}}}if(e===8||e===3){if(n.nodeValue!==t.nodeValue){n.nodeValue=t.nodeValue}}if(!u(n,l)){s(t,n,l)}}function i(t,n,l,r){if(t[l]!==n[l]){let e=f(l,n,"update",r);if(!e){n[l]=t[l]}if(t[l]){if(!e){n.setAttribute(l,t[l])}}else{if(!f(l,n,"remove",r)){n.removeAttribute(l)}}}}function s(n,l,r){if(n instanceof HTMLInputElement&&l instanceof HTMLInputElement&&n.type!=="file"){let e=n.value;let t=l.value;i(n,l,"checked",r);i(n,l,"disabled",r);if(!n.hasAttribute("value")){if(!f("value",l,"remove",r)){l.value="";l.removeAttribute("value")}}else if(e!==t){if(!f("value",l,"update",r)){l.setAttribute("value",e);l.value=e}}}else if(n instanceof HTMLOptionElement){i(n,l,"selected",r)}else if(n instanceof HTMLTextAreaElement&&l instanceof HTMLTextAreaElement){let e=n.value;let t=l.value;if(f("value",l,"update",r)){return}if(e!==t){l.value=e}if(l.firstChild&&l.firstChild.nodeValue!==e){l.firstChild.nodeValue=e}}}function c(e,t,l){let r=[];let i=[];let o=[];let a=[];let u=l.head.style;let d=new Map;for(const n of e.children){d.set(n.outerHTML,n)}for(const s of t.children){let e=d.has(s.outerHTML);let t=l.head.shouldReAppend(s);let n=l.head.shouldPreserve(s);if(e||n){if(t){i.push(s)}else{d.delete(s.outerHTML);o.push(s)}}else{if(u==="append"){if(t){i.push(s);a.push(s)}}else{if(l.head.shouldRemove(s)!==false){i.push(s)}}}}a.push(...d.values());p("to append: ",a);let f=[];for(const c of a){p("adding: ",c);let n=document.createRange().createContextualFragment(c.outerHTML).firstChild;p(n);if(l.callbacks.beforeNodeAdded(n)!==false){if(n.href||n.src){let t=null;let e=new Promise(function(e){t=e});n.addEventListener("load",function(){t()});f.push(e)}t.appendChild(n);l.callbacks.afterNodeAdded(n);r.push(n)}}for(const h of i){if(l.callbacks.beforeNodeRemoved(h)!==false){t.removeChild(h);l.callbacks.afterNodeRemoved(h)}}l.head.afterHeadMorphed(t,{added:r,kept:o,removed:i});return f}function p(){}function t(){}function h(e){let t={};Object.assign(t,n);Object.assign(t,e);t.callbacks={};Object.assign(t.callbacks,n.callbacks);Object.assign(t.callbacks,e.callbacks);t.head={};Object.assign(t.head,n.head);Object.assign(t.head,e.head);return t}function m(e,t,n){n=h(n);return{target:e,newContent:t,config:n,morphStyle:n.morphStyle,ignoreActive:n.ignoreActive,ignoreActiveValue:n.ignoreActiveValue,idMap:C(e,t),deadIds:new Set,callbacks:n.callbacks,head:n.head}}function b(e,t,n){if(e==null||t==null){return false}if(e.nodeType===t.nodeType&&e.tagName===t.tagName){if(e.id!==""&&e.id===t.id){return true}else{return L(n,e,t)>0}}return false}function g(e,t){if(e==null||t==null){return false}return e.nodeType===t.nodeType&&e.tagName===t.tagName}function v(t,e,n){while(t!==e){let e=t;t=t.nextSibling;w(e,n)}x(n,e);return e.nextSibling}function S(n,e,l,r,i){let o=L(i,l,e);let t=null;if(o>0){let e=r;let t=0;while(e!=null){if(b(l,e,i)){return e}t+=L(i,e,n);if(t>o){return null}e=e.nextSibling}}return t}function A(e,t,n,l,r){let i=l;let o=n.nextSibling;let a=0;while(i!=null){if(L(r,i,e)>0){return null}if(g(n,i)){return i}if(g(o,i)){a++;o=o.nextSibling;if(a>=2){return null}}i=i.nextSibling}return i}function y(n){let l=new DOMParser;let e=n.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim,"");if(e.match(/<\/html>/)||e.match(/<\/head>/)||e.match(/<\/body>/)){let t=l.parseFromString(n,"text/html");if(e.match(/<\/html>/)){t.generatedByIdiomorph=true;return t}else{let e=t.firstChild;if(e){e.generatedByIdiomorph=true;return e}else{return null}}}else{let e=l.parseFromString("<body><template>"+n+"</template></body>","text/html");let t=e.body.querySelector("template").content;t.generatedByIdiomorph=true;return t}}function M(e){if(e==null){const t=document.createElement("div");return t}else if(e.generatedByIdiomorph){return e}else if(e instanceof Node){const t=document.createElement("div");t.append(e);return t}else{const t=document.createElement("div");for(const n of[...e]){t.append(n)}return t}}function k(e,t,n){let l=[];let r=[];while(e!=null){l.push(e);e=e.previousSibling}while(l.length>0){let e=l.pop();r.push(e);t.parentElement.insertBefore(e,t)}r.push(t);while(n!=null){l.push(n);r.push(n);n=n.nextSibling}while(l.length>0){t.parentElement.insertBefore(l.pop(),t.nextSibling)}return r}function N(e,t,n){let l;l=e.firstChild;let r=l;let i=0;while(l){let e=T(l,t,n);if(e>i){r=l;i=e}l=l.nextSibling}return r}function T(e,t,n){if(g(e,t)){return.5+L(n,e,t)}return 0}function w(e,t){x(t,e);if(t.callbacks.beforeNodeRemoved(e)===false)return;e.remove();t.callbacks.afterNodeRemoved(e)}function H(e,t){return!e.deadIds.has(t)}function E(e,t,n){let l=e.idMap.get(n)||o;return l.has(t)}function x(e,t){let n=e.idMap.get(t)||o;for(const l of n){e.deadIds.add(l)}}function L(e,t,n){let l=e.idMap.get(t)||o;let r=0;for(const i of l){if(H(e,i)&&E(e,i,n)){++r}}return r}function R(e,n){let l=e.parentElement;let t=e.querySelectorAll("[id]");for(const r of t){let t=r;while(t!==l&&t!=null){let e=n.get(t);if(e==null){e=new Set;n.set(t,e)}e.add(r.id);t=t.parentElement}}}function C(e,t){let n=new Map;R(e,n);R(t,n);return n}return{morph:e,defaults:n}}();(function(){function r(e){if(e==="morph"||e==="morph:outerHTML"){return{morphStyle:"outerHTML"}}else if(e==="morph:innerHTML"){return{morphStyle:"innerHTML"}}else if(e.startsWith("morph:")){return Function("return ("+e.slice(6)+")")()}}htmx.defineExtension("morph",{isInlineSwap:function(e){let t=r(e);return t.swapStyle==="outerHTML"||t.swapStyle==null},handleSwap:function(e,t,n){let l=r(e);if(l){return Idiomorph.morph(t,n.children,l)}}})})();
\ No newline at end of file
+var Idiomorph=function(){"use strict";let o=new Set;let n={morphStyle:"outerHTML",callbacks:{beforeNodeAdded:t,afterNodeAdded:t,beforeNodeMorphed:t,afterNodeMorphed:t,beforeNodeRemoved:t,afterNodeRemoved:t,beforeAttributeUpdated:t},head:{style:"merge",shouldPreserve:function(e){return e.getAttribute("im-preserve")==="true"},shouldReAppend:function(e){return e.getAttribute("im-re-append")==="true"},shouldRemove:t,afterHeadMorphed:t}};function e(e,t,n={}){if(e instanceof Document){e=e.documentElement}if(typeof t==="string"){t=A(t)}let l=M(t);let r=p(e,l,n);return a(e,l,r)}function a(r,i,o){if(o.head.block){let t=r.querySelector("head");let n=i.querySelector("head");if(t&&n){let e=s(n,t,o);Promise.all(e).then(function(){a(r,i,Object.assign(o,{head:{block:false,ignore:true}}))});return}}if(o.morphStyle==="innerHTML"){l(i,r,o);return r.children}else if(o.morphStyle==="outerHTML"||o.morphStyle==null){let e=T(i,r,o);let t=e?.previousSibling;let n=e?.nextSibling;let l=d(r,e,o);if(e){return k(t,l,n)}else{return[]}}else{throw"Do not understand how to morph style "+o.morphStyle}}function u(e,t){return t.ignoreActiveValue&&e===document.activeElement&&e!==document.body}function d(e,t,n){if(n.ignoreActive&&e===document.activeElement){}else if(t==null){if(n.callbacks.beforeNodeRemoved(e)===false)return e;e.remove();n.callbacks.afterNodeRemoved(e);return null}else if(!g(e,t)){if(n.callbacks.beforeNodeRemoved(e)===false)return e;if(n.callbacks.beforeNodeAdded(t)===false)return e;e.parentElement.replaceChild(t,e);n.callbacks.afterNodeAdded(t);n.callbacks.afterNodeRemoved(e);return t}else{if(n.callbacks.beforeNodeMorphed(e,t)===false)return e;if(e instanceof HTMLHeadElement&&n.head.ignore){}else if(e instanceof HTMLHeadElement&&n.head.style!=="morph"){s(t,e,n)}else{r(t,e,n);if(!u(e,n)){l(t,e,n)}}n.callbacks.afterNodeMorphed(e,t);return e}}function l(n,l,r){if(n instanceof HTMLTemplateElement&&l instanceof HTMLTemplateElement){n=n.content;l=l.content}let i=n.firstChild;let o=l.firstChild;let a;while(i){a=i;i=a.nextSibling;if(o==null){if(r.callbacks.beforeNodeAdded(a)===false)return;l.appendChild(a);r.callbacks.afterNodeAdded(a);L(r,a);continue}if(b(a,o,r)){d(o,a,r);o=o.nextSibling;L(r,a);continue}let e=S(n,l,a,o,r);if(e){o=v(o,e,r);d(e,a,r);L(r,a);continue}let t=y(n,l,a,o,r);if(t){o=v(o,t,r);d(t,a,r);L(r,a);continue}if(r.callbacks.beforeNodeAdded(a)===false)return;l.insertBefore(a,o);r.callbacks.afterNodeAdded(a);L(r,a)}while(o!==null){let e=o;o=o.nextSibling;H(e,r)}}function f(e,t,n,l){if(e==="value"&&l.ignoreActiveValue&&t===document.activeElement){return true}return l.callbacks.beforeAttributeUpdated(e,t,n)===false}function r(t,n,l){let e=t.nodeType;if(e===1){const r=t.attributes;const i=n.attributes;for(const o of r){if(f(o.name,n,"update",l)){continue}if(n.getAttribute(o.name)!==o.value){n.setAttribute(o.name,o.value)}}for(let e=i.length-1;0<=e;e--){const a=i[e];if(f(a.name,n,"remove",l)){continue}if(!t.hasAttribute(a.name)){n.removeAttribute(a.name)}}}if(e===8||e===3){if(n.nodeValue!==t.nodeValue){n.nodeValue=t.nodeValue}}if(!u(n,l)){c(t,n,l)}}function i(t,n,l,r){if(t[l]!==n[l]){let e=f(l,n,"update",r);if(!e){n[l]=t[l]}if(t[l]){if(!e){n.setAttribute(l,t[l])}}else{if(!f(l,n,"remove",r)){n.removeAttribute(l)}}}}function c(n,l,r){if(n instanceof HTMLInputElement&&l instanceof HTMLInputElement&&n.type!=="file"){let e=n.value;let t=l.value;i(n,l,"checked",r);i(n,l,"disabled",r);if(!n.hasAttribute("value")){if(!f("value",l,"remove",r)){l.value="";l.removeAttribute("value")}}else if(e!==t){if(!f("value",l,"update",r)){l.setAttribute("value",e);l.value=e}}}else if(n instanceof HTMLOptionElement){i(n,l,"selected",r)}else if(n instanceof HTMLTextAreaElement&&l instanceof HTMLTextAreaElement){let e=n.value;let t=l.value;if(f("value",l,"update",r)){return}if(e!==t){l.value=e}if(l.firstChild&&l.firstChild.nodeValue!==e){l.firstChild.nodeValue=e}}}function s(e,t,l){let r=[];let i=[];let o=[];let a=[];let u=l.head.style;let d=new Map;for(const n of e.children){d.set(n.outerHTML,n)}for(const c of t.children){let e=d.has(c.outerHTML);let t=l.head.shouldReAppend(c);let n=l.head.shouldPreserve(c);if(e||n){if(t){i.push(c)}else{d.delete(c.outerHTML);o.push(c)}}else{if(u==="append"){if(t){i.push(c);a.push(c)}}else{if(l.head.shouldRemove(c)!==false){i.push(c)}}}}a.push(...d.values());m("to append: ",a);let f=[];for(const s of a){m("adding: ",s);let n=document.createRange().createContextualFragment(s.outerHTML).firstChild;m(n);if(l.callbacks.beforeNodeAdded(n)!==false){if(n.href||n.src){let t=null;let e=new Promise(function(e){t=e});n.addEventListener("load",function(){t()});f.push(e)}t.appendChild(n);l.callbacks.afterNodeAdded(n);r.push(n)}}for(const h of i){if(l.callbacks.beforeNodeRemoved(h)!==false){t.removeChild(h);l.callbacks.afterNodeRemoved(h)}}l.head.afterHeadMorphed(t,{added:r,kept:o,removed:i});return f}function m(){}function t(){}function h(e){let t={};Object.assign(t,n);Object.assign(t,e);t.callbacks={};Object.assign(t.callbacks,n.callbacks);Object.assign(t.callbacks,e.callbacks);t.head={};Object.assign(t.head,n.head);Object.assign(t.head,e.head);return t}function p(e,t,n){n=h(n);return{target:e,newContent:t,config:n,morphStyle:n.morphStyle,ignoreActive:n.ignoreActive,ignoreActiveValue:n.ignoreActiveValue,idMap:C(e,t),deadIds:new Set,callbacks:n.callbacks,head:n.head}}function b(e,t,n){if(e==null||t==null){return false}if(e.nodeType===t.nodeType&&e.tagName===t.tagName){if(e.id!==""&&e.id===t.id){return true}else{return x(n,e,t)>0}}return false}function g(e,t){if(e==null||t==null){return false}return e.nodeType===t.nodeType&&e.tagName===t.tagName}function v(t,e,n){while(t!==e){let e=t;t=t.nextSibling;H(e,n)}L(n,e);return e.nextSibling}function S(n,e,l,r,i){let o=x(i,l,e);let t=null;if(o>0){let e=r;let t=0;while(e!=null){if(b(l,e,i)){return e}t+=x(i,e,n);if(t>o){return null}e=e.nextSibling}}return t}function y(e,t,n,l,r){let i=l;let o=n.nextSibling;let a=0;while(i!=null){if(x(r,i,e)>0){return null}if(g(n,i)){return i}if(g(o,i)){a++;o=o.nextSibling;if(a>=2){return null}}i=i.nextSibling}return i}function A(n){let l=new DOMParser;let e=n.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim,"");if(e.match(/<\/html>/)||e.match(/<\/head>/)||e.match(/<\/body>/)){let t=l.parseFromString(n,"text/html");if(e.match(/<\/html>/)){t.generatedByIdiomorph=true;return t}else{let e=t.firstChild;if(e){e.generatedByIdiomorph=true;return e}else{return null}}}else{let e=l.parseFromString("<body><template>"+n+"</template></body>","text/html");let t=e.body.querySelector("template").content;t.generatedByIdiomorph=true;return t}}function M(e){if(e==null){const t=document.createElement("div");return t}else if(e.generatedByIdiomorph){return e}else if(e instanceof Node){const t=document.createElement("div");t.append(e);return t}else{const t=document.createElement("div");for(const n of[...e]){t.append(n)}return t}}function k(e,t,n){let l=[];let r=[];while(e!=null){l.push(e);e=e.previousSibling}while(l.length>0){let e=l.pop();r.push(e);t.parentElement.insertBefore(e,t)}r.push(t);while(n!=null){l.push(n);r.push(n);n=n.nextSibling}while(l.length>0){t.parentElement.insertBefore(l.pop(),t.nextSibling)}return r}function T(e,t,n){let l;l=e.firstChild;let r=l;let i=0;while(l){let e=N(l,t,n);if(e>i){r=l;i=e}l=l.nextSibling}return r}function N(e,t,n){if(g(e,t)){return.5+x(n,e,t)}return 0}function H(e,t){L(t,e);if(t.callbacks.beforeNodeRemoved(e)===false)return;e.remove();t.callbacks.afterNodeRemoved(e)}function w(e,t){return!e.deadIds.has(t)}function E(e,t,n){let l=e.idMap.get(n)||o;return l.has(t)}function L(e,t){let n=e.idMap.get(t)||o;for(const l of n){e.deadIds.add(l)}}function x(e,t,n){let l=e.idMap.get(t)||o;let r=0;for(const i of l){if(w(e,i)&&E(e,i,n)){++r}}return r}function R(e,n){let l=e.parentElement;let t=e.querySelectorAll("[id]");for(const r of t){let t=r;while(t!==l&&t!=null){let e=n.get(t);if(e==null){e=new Set;n.set(t,e)}e.add(r.id);t=t.parentElement}}}function C(e,t){let n=new Map;R(e,n);R(t,n);return n}return{morph:e,defaults:n}}();(function(){function r(e){if(e==="morph"||e==="morph:outerHTML"){return{morphStyle:"outerHTML"}}else if(e==="morph:innerHTML"){return{morphStyle:"innerHTML"}}else if(e.startsWith("morph:")){return Function("return ("+e.slice(6)+")")()}}htmx.defineExtension("morph",{isInlineSwap:function(e){let t=r(e);return t?.morphStyle==="outerHTML"||t?.morphStyle==null},handleSwap:function(e,t,n){let l=r(e);if(l){return Idiomorph.morph(t,n.children,l)}}})})();
\ No newline at end of file
diff --git a/dist/idiomorph-htmx.js b/dist/idiomorph-htmx.js
index 4cac7c0..386e910 100644
--- a/dist/idiomorph-htmx.js
+++ b/dist/idiomorph-htmx.js
@@ -12,7 +12,7 @@
     htmx.defineExtension('morph', {
         isInlineSwap: function(swapStyle) {
             let config = createMorphConfig(swapStyle);
-            return config.swapStyle === "outerHTML" || config.swapStyle == null;
+            return config?.morphStyle === "outerHTML" || config?.morphStyle == null;
         },
         handleSwap: function (swapStyle, target, fragment) {
             let config = createMorphConfig(swapStyle);
diff --git a/dist/idiomorph.amd.js b/dist/idiomorph.amd.js
index 7be372b..d00ee9c 100644
--- a/dist/idiomorph.amd.js
+++ b/dist/idiomorph.amd.js
@@ -179,6 +179,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;
diff --git a/dist/idiomorph.cjs.js b/dist/idiomorph.cjs.js
index d225c3a..43ac836 100644
--- a/dist/idiomorph.cjs.js
+++ b/dist/idiomorph.cjs.js
@@ -177,6 +177,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;
diff --git a/dist/idiomorph.esm.js b/dist/idiomorph.esm.js
index 5cb3f51..302023f 100644
--- a/dist/idiomorph.esm.js
+++ b/dist/idiomorph.esm.js
@@ -177,6 +177,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;
diff --git a/dist/idiomorph.js b/dist/idiomorph.js
index 84539ff..88cf150 100644
--- a/dist/idiomorph.js
+++ b/dist/idiomorph.js
@@ -110,7 +110,7 @@ var Idiomorph = (function () {
          * @returns {boolean}
          */
         function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
-            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement;
+            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement && possibleActiveElement !== document.body;
         }
 
         /**
@@ -177,6 +177,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;
diff --git a/dist/idiomorph.min.js b/dist/idiomorph.min.js
index e807c19..4dfbd8c 100644
--- a/dist/idiomorph.min.js
+++ b/dist/idiomorph.min.js
@@ -1 +1 @@
-var Idiomorph=function(){"use strict";let o=new Set;let n={morphStyle:"outerHTML",callbacks:{beforeNodeAdded:t,afterNodeAdded:t,beforeNodeMorphed:t,afterNodeMorphed:t,beforeNodeRemoved:t,afterNodeRemoved:t,beforeAttributeUpdated:t},head:{style:"merge",shouldPreserve:function(e){return e.getAttribute("im-preserve")==="true"},shouldReAppend:function(e){return e.getAttribute("im-re-append")==="true"},shouldRemove:t,afterHeadMorphed:t}};function e(e,t,n={}){if(e instanceof Document){e=e.documentElement}if(typeof t==="string"){t=k(t)}let l=y(t);let r=p(e,l,n);return a(e,l,r)}function a(r,i,o){if(o.head.block){let t=r.querySelector("head");let n=i.querySelector("head");if(t&&n){let e=c(n,t,o);Promise.all(e).then(function(){a(r,i,Object.assign(o,{head:{block:false,ignore:true}}))});return}}if(o.morphStyle==="innerHTML"){l(i,r,o);return r.children}else if(o.morphStyle==="outerHTML"||o.morphStyle==null){let e=M(i,r,o);let t=e?.previousSibling;let n=e?.nextSibling;let l=d(r,e,o);if(e){return N(t,l,n)}else{return[]}}else{throw"Do not understand how to morph style "+o.morphStyle}}function u(e,t){return t.ignoreActiveValue&&e===document.activeElement}function d(e,t,n){if(n.ignoreActive&&e===document.activeElement){}else if(t==null){if(n.callbacks.beforeNodeRemoved(e)===false)return e;e.remove();n.callbacks.afterNodeRemoved(e);return null}else if(!g(e,t)){if(n.callbacks.beforeNodeRemoved(e)===false)return e;if(n.callbacks.beforeNodeAdded(t)===false)return e;e.parentElement.replaceChild(t,e);n.callbacks.afterNodeAdded(t);n.callbacks.afterNodeRemoved(e);return t}else{if(n.callbacks.beforeNodeMorphed(e,t)===false)return e;if(e instanceof HTMLHeadElement&&n.head.ignore){}else if(e instanceof HTMLHeadElement&&n.head.style!=="morph"){c(t,e,n)}else{r(t,e,n);if(!u(e,n)){l(t,e,n)}}n.callbacks.afterNodeMorphed(e,t);return e}}function l(n,l,r){let i=n.firstChild;let o=l.firstChild;let a;while(i){a=i;i=a.nextSibling;if(o==null){if(r.callbacks.beforeNodeAdded(a)===false)return;l.appendChild(a);r.callbacks.afterNodeAdded(a);H(r,a);continue}if(b(a,o,r)){d(o,a,r);o=o.nextSibling;H(r,a);continue}let e=A(n,l,a,o,r);if(e){o=v(o,e,r);d(e,a,r);H(r,a);continue}let t=S(n,l,a,o,r);if(t){o=v(o,t,r);d(t,a,r);H(r,a);continue}if(r.callbacks.beforeNodeAdded(a)===false)return;l.insertBefore(a,o);r.callbacks.afterNodeAdded(a);H(r,a)}while(o!==null){let e=o;o=o.nextSibling;T(e,r)}}function f(e,t,n,l){if(e==="value"&&l.ignoreActiveValue&&t===document.activeElement){return true}return l.callbacks.beforeAttributeUpdated(e,t,n)===false}function r(t,n,l){let e=t.nodeType;if(e===1){const r=t.attributes;const i=n.attributes;for(const o of r){if(f(o.name,n,"update",l)){continue}if(n.getAttribute(o.name)!==o.value){n.setAttribute(o.name,o.value)}}for(let e=i.length-1;0<=e;e--){const a=i[e];if(f(a.name,n,"remove",l)){continue}if(!t.hasAttribute(a.name)){n.removeAttribute(a.name)}}}if(e===8||e===3){if(n.nodeValue!==t.nodeValue){n.nodeValue=t.nodeValue}}if(!u(n,l)){s(t,n,l)}}function i(t,n,l,r){if(t[l]!==n[l]){let e=f(l,n,"update",r);if(!e){n[l]=t[l]}if(t[l]){if(!e){n.setAttribute(l,t[l])}}else{if(!f(l,n,"remove",r)){n.removeAttribute(l)}}}}function s(n,l,r){if(n instanceof HTMLInputElement&&l instanceof HTMLInputElement&&n.type!=="file"){let e=n.value;let t=l.value;i(n,l,"checked",r);i(n,l,"disabled",r);if(!n.hasAttribute("value")){if(!f("value",l,"remove",r)){l.value="";l.removeAttribute("value")}}else if(e!==t){if(!f("value",l,"update",r)){l.setAttribute("value",e);l.value=e}}}else if(n instanceof HTMLOptionElement){i(n,l,"selected",r)}else if(n instanceof HTMLTextAreaElement&&l instanceof HTMLTextAreaElement){let e=n.value;let t=l.value;if(f("value",l,"update",r)){return}if(e!==t){l.value=e}if(l.firstChild&&l.firstChild.nodeValue!==e){l.firstChild.nodeValue=e}}}function c(e,t,l){let r=[];let i=[];let o=[];let a=[];let u=l.head.style;let d=new Map;for(const n of e.children){d.set(n.outerHTML,n)}for(const s of t.children){let e=d.has(s.outerHTML);let t=l.head.shouldReAppend(s);let n=l.head.shouldPreserve(s);if(e||n){if(t){i.push(s)}else{d.delete(s.outerHTML);o.push(s)}}else{if(u==="append"){if(t){i.push(s);a.push(s)}}else{if(l.head.shouldRemove(s)!==false){i.push(s)}}}}a.push(...d.values());m("to append: ",a);let f=[];for(const c of a){m("adding: ",c);let n=document.createRange().createContextualFragment(c.outerHTML).firstChild;m(n);if(l.callbacks.beforeNodeAdded(n)!==false){if(n.href||n.src){let t=null;let e=new Promise(function(e){t=e});n.addEventListener("load",function(){t()});f.push(e)}t.appendChild(n);l.callbacks.afterNodeAdded(n);r.push(n)}}for(const h of i){if(l.callbacks.beforeNodeRemoved(h)!==false){t.removeChild(h);l.callbacks.afterNodeRemoved(h)}}l.head.afterHeadMorphed(t,{added:r,kept:o,removed:i});return f}function m(){}function t(){}function h(e){let t={};Object.assign(t,n);Object.assign(t,e);t.callbacks={};Object.assign(t.callbacks,n.callbacks);Object.assign(t.callbacks,e.callbacks);t.head={};Object.assign(t.head,n.head);Object.assign(t.head,e.head);return t}function p(e,t,n){n=h(n);return{target:e,newContent:t,config:n,morphStyle:n.morphStyle,ignoreActive:n.ignoreActive,ignoreActiveValue:n.ignoreActiveValue,idMap:C(e,t),deadIds:new Set,callbacks:n.callbacks,head:n.head}}function b(e,t,n){if(e==null||t==null){return false}if(e.nodeType===t.nodeType&&e.tagName===t.tagName){if(e.id!==""&&e.id===t.id){return true}else{return L(n,e,t)>0}}return false}function g(e,t){if(e==null||t==null){return false}return e.nodeType===t.nodeType&&e.tagName===t.tagName}function v(t,e,n){while(t!==e){let e=t;t=t.nextSibling;T(e,n)}H(n,e);return e.nextSibling}function A(n,e,l,r,i){let o=L(i,l,e);let t=null;if(o>0){let e=r;let t=0;while(e!=null){if(b(l,e,i)){return e}t+=L(i,e,n);if(t>o){return null}e=e.nextSibling}}return t}function S(e,t,n,l,r){let i=l;let o=n.nextSibling;let a=0;while(i!=null){if(L(r,i,e)>0){return null}if(g(n,i)){return i}if(g(o,i)){a++;o=o.nextSibling;if(a>=2){return null}}i=i.nextSibling}return i}function k(n){let l=new DOMParser;let e=n.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim,"");if(e.match(/<\/html>/)||e.match(/<\/head>/)||e.match(/<\/body>/)){let t=l.parseFromString(n,"text/html");if(e.match(/<\/html>/)){t.generatedByIdiomorph=true;return t}else{let e=t.firstChild;if(e){e.generatedByIdiomorph=true;return e}else{return null}}}else{let e=l.parseFromString("<body><template>"+n+"</template></body>","text/html");let t=e.body.querySelector("template").content;t.generatedByIdiomorph=true;return t}}function y(e){if(e==null){const t=document.createElement("div");return t}else if(e.generatedByIdiomorph){return e}else if(e instanceof Node){const t=document.createElement("div");t.append(e);return t}else{const t=document.createElement("div");for(const n of[...e]){t.append(n)}return t}}function N(e,t,n){let l=[];let r=[];while(e!=null){l.push(e);e=e.previousSibling}while(l.length>0){let e=l.pop();r.push(e);t.parentElement.insertBefore(e,t)}r.push(t);while(n!=null){l.push(n);r.push(n);n=n.nextSibling}while(l.length>0){t.parentElement.insertBefore(l.pop(),t.nextSibling)}return r}function M(e,t,n){let l;l=e.firstChild;let r=l;let i=0;while(l){let e=w(l,t,n);if(e>i){r=l;i=e}l=l.nextSibling}return r}function w(e,t,n){if(g(e,t)){return.5+L(n,e,t)}return 0}function T(e,t){H(t,e);if(t.callbacks.beforeNodeRemoved(e)===false)return;e.remove();t.callbacks.afterNodeRemoved(e)}function E(e,t){return!e.deadIds.has(t)}function x(e,t,n){let l=e.idMap.get(n)||o;return l.has(t)}function H(e,t){let n=e.idMap.get(t)||o;for(const l of n){e.deadIds.add(l)}}function L(e,t,n){let l=e.idMap.get(t)||o;let r=0;for(const i of l){if(E(e,i)&&x(e,i,n)){++r}}return r}function R(e,n){let l=e.parentElement;let t=e.querySelectorAll("[id]");for(const r of t){let t=r;while(t!==l&&t!=null){let e=n.get(t);if(e==null){e=new Set;n.set(t,e)}e.add(r.id);t=t.parentElement}}}function C(e,t){let n=new Map;R(e,n);R(t,n);return n}return{morph:e,defaults:n}}();
\ No newline at end of file
+var Idiomorph=function(){"use strict";let o=new Set;let n={morphStyle:"outerHTML",callbacks:{beforeNodeAdded:t,afterNodeAdded:t,beforeNodeMorphed:t,afterNodeMorphed:t,beforeNodeRemoved:t,afterNodeRemoved:t,beforeAttributeUpdated:t},head:{style:"merge",shouldPreserve:function(e){return e.getAttribute("im-preserve")==="true"},shouldReAppend:function(e){return e.getAttribute("im-re-append")==="true"},shouldRemove:t,afterHeadMorphed:t}};function e(e,t,n={}){if(e instanceof Document){e=e.documentElement}if(typeof t==="string"){t=k(t)}let l=y(t);let r=p(e,l,n);return a(e,l,r)}function a(r,i,o){if(o.head.block){let t=r.querySelector("head");let n=i.querySelector("head");if(t&&n){let e=s(n,t,o);Promise.all(e).then(function(){a(r,i,Object.assign(o,{head:{block:false,ignore:true}}))});return}}if(o.morphStyle==="innerHTML"){l(i,r,o);return r.children}else if(o.morphStyle==="outerHTML"||o.morphStyle==null){let e=N(i,r,o);let t=e?.previousSibling;let n=e?.nextSibling;let l=d(r,e,o);if(e){return M(t,l,n)}else{return[]}}else{throw"Do not understand how to morph style "+o.morphStyle}}function u(e,t){return t.ignoreActiveValue&&e===document.activeElement&&e!==document.body}function d(e,t,n){if(n.ignoreActive&&e===document.activeElement){}else if(t==null){if(n.callbacks.beforeNodeRemoved(e)===false)return e;e.remove();n.callbacks.afterNodeRemoved(e);return null}else if(!g(e,t)){if(n.callbacks.beforeNodeRemoved(e)===false)return e;if(n.callbacks.beforeNodeAdded(t)===false)return e;e.parentElement.replaceChild(t,e);n.callbacks.afterNodeAdded(t);n.callbacks.afterNodeRemoved(e);return t}else{if(n.callbacks.beforeNodeMorphed(e,t)===false)return e;if(e instanceof HTMLHeadElement&&n.head.ignore){}else if(e instanceof HTMLHeadElement&&n.head.style!=="morph"){s(t,e,n)}else{r(t,e,n);if(!u(e,n)){l(t,e,n)}}n.callbacks.afterNodeMorphed(e,t);return e}}function l(n,l,r){if(n instanceof HTMLTemplateElement&&l instanceof HTMLTemplateElement){n=n.content;l=l.content}let i=n.firstChild;let o=l.firstChild;let a;while(i){a=i;i=a.nextSibling;if(o==null){if(r.callbacks.beforeNodeAdded(a)===false)return;l.appendChild(a);r.callbacks.afterNodeAdded(a);x(r,a);continue}if(b(a,o,r)){d(o,a,r);o=o.nextSibling;x(r,a);continue}let e=A(n,l,a,o,r);if(e){o=v(o,e,r);d(e,a,r);x(r,a);continue}let t=S(n,l,a,o,r);if(t){o=v(o,t,r);d(t,a,r);x(r,a);continue}if(r.callbacks.beforeNodeAdded(a)===false)return;l.insertBefore(a,o);r.callbacks.afterNodeAdded(a);x(r,a)}while(o!==null){let e=o;o=o.nextSibling;E(e,r)}}function f(e,t,n,l){if(e==="value"&&l.ignoreActiveValue&&t===document.activeElement){return true}return l.callbacks.beforeAttributeUpdated(e,t,n)===false}function r(t,n,l){let e=t.nodeType;if(e===1){const r=t.attributes;const i=n.attributes;for(const o of r){if(f(o.name,n,"update",l)){continue}if(n.getAttribute(o.name)!==o.value){n.setAttribute(o.name,o.value)}}for(let e=i.length-1;0<=e;e--){const a=i[e];if(f(a.name,n,"remove",l)){continue}if(!t.hasAttribute(a.name)){n.removeAttribute(a.name)}}}if(e===8||e===3){if(n.nodeValue!==t.nodeValue){n.nodeValue=t.nodeValue}}if(!u(n,l)){c(t,n,l)}}function i(t,n,l,r){if(t[l]!==n[l]){let e=f(l,n,"update",r);if(!e){n[l]=t[l]}if(t[l]){if(!e){n.setAttribute(l,t[l])}}else{if(!f(l,n,"remove",r)){n.removeAttribute(l)}}}}function c(n,l,r){if(n instanceof HTMLInputElement&&l instanceof HTMLInputElement&&n.type!=="file"){let e=n.value;let t=l.value;i(n,l,"checked",r);i(n,l,"disabled",r);if(!n.hasAttribute("value")){if(!f("value",l,"remove",r)){l.value="";l.removeAttribute("value")}}else if(e!==t){if(!f("value",l,"update",r)){l.setAttribute("value",e);l.value=e}}}else if(n instanceof HTMLOptionElement){i(n,l,"selected",r)}else if(n instanceof HTMLTextAreaElement&&l instanceof HTMLTextAreaElement){let e=n.value;let t=l.value;if(f("value",l,"update",r)){return}if(e!==t){l.value=e}if(l.firstChild&&l.firstChild.nodeValue!==e){l.firstChild.nodeValue=e}}}function s(e,t,l){let r=[];let i=[];let o=[];let a=[];let u=l.head.style;let d=new Map;for(const n of e.children){d.set(n.outerHTML,n)}for(const c of t.children){let e=d.has(c.outerHTML);let t=l.head.shouldReAppend(c);let n=l.head.shouldPreserve(c);if(e||n){if(t){i.push(c)}else{d.delete(c.outerHTML);o.push(c)}}else{if(u==="append"){if(t){i.push(c);a.push(c)}}else{if(l.head.shouldRemove(c)!==false){i.push(c)}}}}a.push(...d.values());m("to append: ",a);let f=[];for(const s of a){m("adding: ",s);let n=document.createRange().createContextualFragment(s.outerHTML).firstChild;m(n);if(l.callbacks.beforeNodeAdded(n)!==false){if(n.href||n.src){let t=null;let e=new Promise(function(e){t=e});n.addEventListener("load",function(){t()});f.push(e)}t.appendChild(n);l.callbacks.afterNodeAdded(n);r.push(n)}}for(const h of i){if(l.callbacks.beforeNodeRemoved(h)!==false){t.removeChild(h);l.callbacks.afterNodeRemoved(h)}}l.head.afterHeadMorphed(t,{added:r,kept:o,removed:i});return f}function m(){}function t(){}function h(e){let t={};Object.assign(t,n);Object.assign(t,e);t.callbacks={};Object.assign(t.callbacks,n.callbacks);Object.assign(t.callbacks,e.callbacks);t.head={};Object.assign(t.head,n.head);Object.assign(t.head,e.head);return t}function p(e,t,n){n=h(n);return{target:e,newContent:t,config:n,morphStyle:n.morphStyle,ignoreActive:n.ignoreActive,ignoreActiveValue:n.ignoreActiveValue,idMap:C(e,t),deadIds:new Set,callbacks:n.callbacks,head:n.head}}function b(e,t,n){if(e==null||t==null){return false}if(e.nodeType===t.nodeType&&e.tagName===t.tagName){if(e.id!==""&&e.id===t.id){return true}else{return L(n,e,t)>0}}return false}function g(e,t){if(e==null||t==null){return false}return e.nodeType===t.nodeType&&e.tagName===t.tagName}function v(t,e,n){while(t!==e){let e=t;t=t.nextSibling;E(e,n)}x(n,e);return e.nextSibling}function A(n,e,l,r,i){let o=L(i,l,e);let t=null;if(o>0){let e=r;let t=0;while(e!=null){if(b(l,e,i)){return e}t+=L(i,e,n);if(t>o){return null}e=e.nextSibling}}return t}function S(e,t,n,l,r){let i=l;let o=n.nextSibling;let a=0;while(i!=null){if(L(r,i,e)>0){return null}if(g(n,i)){return i}if(g(o,i)){a++;o=o.nextSibling;if(a>=2){return null}}i=i.nextSibling}return i}function k(n){let l=new DOMParser;let e=n.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim,"");if(e.match(/<\/html>/)||e.match(/<\/head>/)||e.match(/<\/body>/)){let t=l.parseFromString(n,"text/html");if(e.match(/<\/html>/)){t.generatedByIdiomorph=true;return t}else{let e=t.firstChild;if(e){e.generatedByIdiomorph=true;return e}else{return null}}}else{let e=l.parseFromString("<body><template>"+n+"</template></body>","text/html");let t=e.body.querySelector("template").content;t.generatedByIdiomorph=true;return t}}function y(e){if(e==null){const t=document.createElement("div");return t}else if(e.generatedByIdiomorph){return e}else if(e instanceof Node){const t=document.createElement("div");t.append(e);return t}else{const t=document.createElement("div");for(const n of[...e]){t.append(n)}return t}}function M(e,t,n){let l=[];let r=[];while(e!=null){l.push(e);e=e.previousSibling}while(l.length>0){let e=l.pop();r.push(e);t.parentElement.insertBefore(e,t)}r.push(t);while(n!=null){l.push(n);r.push(n);n=n.nextSibling}while(l.length>0){t.parentElement.insertBefore(l.pop(),t.nextSibling)}return r}function N(e,t,n){let l;l=e.firstChild;let r=l;let i=0;while(l){let e=T(l,t,n);if(e>i){r=l;i=e}l=l.nextSibling}return r}function T(e,t,n){if(g(e,t)){return.5+L(n,e,t)}return 0}function E(e,t){x(t,e);if(t.callbacks.beforeNodeRemoved(e)===false)return;e.remove();t.callbacks.afterNodeRemoved(e)}function w(e,t){return!e.deadIds.has(t)}function H(e,t,n){let l=e.idMap.get(n)||o;return l.has(t)}function x(e,t){let n=e.idMap.get(t)||o;for(const l of n){e.deadIds.add(l)}}function L(e,t,n){let l=e.idMap.get(t)||o;let r=0;for(const i of l){if(w(e,i)&&H(e,i,n)){++r}}return r}function R(e,n){let l=e.parentElement;let t=e.querySelectorAll("[id]");for(const r of t){let t=r;while(t!==l&&t!=null){let e=n.get(t);if(e==null){e=new Set;n.set(t,e)}e.add(r.id);t=t.parentElement}}}function C(e,t){let n=new Map;R(e,n);R(t,n);return n}return{morph:e,defaults:n}}();
\ No newline at end of file
diff --git a/dist/idiomorph.min.js.gz b/dist/idiomorph.min.js.gz
index 07b65cdd44e30b704a9c67ef01f0e6869ba37658..fa299702160911e7e479f729bbf3f2b33a649faa 100644
GIT binary patch
literal 2690
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

literal 2667
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
ZkSjVT8?K-vZCfy>{{v1wMYrxA000(YDHZ?#

diff --git a/src/idiomorph.js b/src/idiomorph.js
index 263c569..88cf150 100644
--- a/src/idiomorph.js
+++ b/src/idiomorph.js
@@ -177,6 +177,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;
diff --git a/test/core.js b/test/core.js
index a2d0517..c2690da 100644
--- a/test/core.js
+++ b/test/core.js
@@ -185,6 +185,14 @@ describe("Core morphing tests", function(){
         initial.outerHTML.should.equal("<div></div>");
     });
 
+    it('can morph a template tag properly', function()
+    {
+      let initial = make("<template data-old>Foo</template>");
+      let final = make("<template data-new>Bar</template>");
+      Idiomorph.morph(initial, final);
+      initial.outerHTML.should.equal(final.outerHTML);
+    });
+
     it('ignores active element when ignoreActive set to true', function()
     {
         let initialSource = "<div><div id='d1'>Foo</div><input id='i1'></div>";