From a5306597a355bef876db48ffdd8015d02c4015f4 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]: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
[HTMLTemplateElement.content]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content
---
 src/idiomorph.js | 4 ++++
 test/core.js     | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/idiomorph.js b/src/idiomorph.js
index 94f038d..a142bd5 100644
--- a/src/idiomorph.js
+++ b/src/idiomorph.js
@@ -307,6 +307,10 @@ var Idiomorph = (function () {
          * @returns {void}
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             /**
              *
diff --git a/test/core.js b/test/core.js
index b36a5ec..c78d750 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>";