From 8a95e0f98aaa41b48f548def51bd4bcceb8d3fc1 Mon Sep 17 00:00:00 2001
From: Piper <piper@yxzzy.wtf>
Date: Sun, 16 Aug 2026 16:52:11 +0200
Subject: [PATCH] Add ref binding

* This will allow template-e6d users to also autobind references within
  their template for any more specific post-binding logic without
  risking ID conflicts.
---
 src/template/example.html    | 12 ++++++------
 src/template/template-e6d.js | 23 +++++++++++++++--------
 2 files changed, 21 insertions(+), 14 deletions(-)
diff --git a/src/template/example.html b/src/template/example.html
index d97082d..e4fb98c 100644
--- a/src/template/example.html
+++ b/src/template/example.html
@@ -5,7 +5,7 @@
 <body>
     <template id="template-example" is="template-e6d">
         <div>
-            <h2>Easy template</h2>
+            <h2 data-e6d-ref="h2">Easy template</h2>
             <p class="class-a class-b $class">Here's some text $textinterp interpolation, and some dynamic "$dynamicInterp".</p>
             <p>$textinterp</p>
             <button title="$title" data-e6d-event-click="click buttonclick">A button with tooltip and onclick $textinterpfunc</button>
@@ -13,7 +13,7 @@
             <label>This should autoselect to 3</label>
             <select data-e6d-value="$selectval">
                 <option value="one">1</option>
-                <option value="two">2</option>
+                <option data-e6d-ref="opt1" value="two">2</option>
                 <option value="three">3</option>
                 <option value="four">4</option>
             </select>
@@ -29,9 +29,7 @@
             </div>
         </div>
 
-        <section id="template-add">
-
-        </section>
+        <section id="template-add"></section>
 
         <script>
             document.getElementById(`template-example`).addEventListener(`e6d-error`, console.log);
@@ -49,7 +47,9 @@
                     dynamicInterp: document.getElementById(`text-interp`).value,
                     selectval: `three`,
                 });
-                document.getElementById(`template-add`).appendChild(bind);
+                document.getElementById(`template-add`).appendChild(bind[0]);
+                bind[1].h2.innerText = `Updated via Reference`;
+                bind[1].opt1.innerText = `Ref Update`;
             };
         </script>
     </main>
diff --git a/src/template/template-e6d.js b/src/template/template-e6d.js
index 50764d2..96919cb 100644
--- a/src/template/template-e6d.js
+++ b/src/template/template-e6d.js
@@ -51,9 +51,12 @@ class TemplateE6d extends HTMLTemplateElement {
         const bindAttr = [];
         const bindEvent = [];
         let bindContent = false;
+        let ref = null;
         if (node.getAttributeNames) {
             for (const attr of node.getAttributeNames()) {
-                if (attr.indexOf(`data-e6d-event-`) >= 0) {
+                if (attr === `data-e6d-ref`) {
+                    ref = node.getAttribute(attr);
+                } else if (attr.indexOf(`data-e6d-event-`) >= 0) {
                     const matches = [];
                     node.getAttribute(attr).matchAll(eventRegex).forEach(f => matches.push(f));
                     if (matches.length === 1 && matches[0].length === 3) {
@@ -89,10 +92,11 @@ class TemplateE6d extends HTMLTemplateElement {
             }
         }
 
-        if (bindAttr.length !== 0 || bindEvent.length !== 0 || bindContent) {
+        if (bindAttr.length !== 0 || bindEvent.length !== 0 || bindContent || ref !== null) {
             // Add a leaf!
             allRoutes.push({
                 route: trail,
+                ref,
                 bind: {
                     attr: bindAttr,
                     event: bindEvent,
@@ -121,13 +125,10 @@ class TemplateE6d extends HTMLTemplateElement {
   connectedCallback() {
   }
 
-  bind(obj) {
+  bind(obj = {}) {
     this.preprocess();
 
     const templated = document.importNode(this.content, true);
-    if (!obj) {
-        return templated;
-    }
 
     const resolve = (root, route) => {
         let ptr = root;
@@ -162,8 +163,14 @@ class TemplateE6d extends HTMLTemplateElement {
         return result;
     };
 
+    const references = {};
     for (const route of this.bindRoute) {
         const injectTarget = resolve(templated, route.route);
+        if (route.ref) {
+            references[route.ref] = injectTarget;
+            injectTarget.removeAttribute(`data-e6d-ref`);
+        }
+
         for (const attr of route.bind.attr) {
             const attrValue = templateString(attr.template, obj);
             if (attr.func) {
@@ -187,8 +194,8 @@ class TemplateE6d extends HTMLTemplateElement {
             injectTarget.data = dataValue;
         }
     }
-
-    return templated;
+    
+    return [templated, references,];
   }
    
 }
