html: clone tags & templates passed in via slots

I'm not 100% sure the right behavior here in the long run (whether
we should be doing a deep clone or not), so for now I haven't added
any specific tests. Snapshot tests covering uses of templates which
depend on cloning (i.e. parents which reuse a given template) will
do better to make sure everything keeps working like it should.

1 files changed, 14 insertions, 0 deletions

diff --git a/src/util/html.js b/src/util/html.js
index a1d6962..e2cbf77 100644
--- a/src/util/html.js
+++ b/src/util/html.js
@@ -190,6 +190,10 @@ export class Tag {
     this.content = content;
   }
 
+  clone() {
+    return new Tag(this.tagName, this.attributes, this.content);
+  }
+
   set tagName(value) {
     if (value === undefined || value === null) {
       this.tagName = '';
@@ -489,6 +493,12 @@ export class Template {
     this.#description = description;
   }
 
+  clone() {
+    const clone = new Template(this.#description);
+    clone.setSlots(this.#slotValues);
+    return clone;
+  }
+
   static validateDescription(description) {
     if (typeof description !== 'object') {
       throw new TypeError(`Expected object, got ${typeof description}`);
@@ -688,6 +698,10 @@ export class Template {
         return blank();
       }
 
+      if (providedValue instanceof Tag || providedValue instanceof Template) {
+        return providedValue.clone();
+      }
+
       return providedValue;
     }