snice 3.9.0 → 3.10.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v3.8.0
+ * snice v3.9.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -987,7 +987,22 @@ function prepareTemplate(result) {
     const htmlParts = [];
     const attrNamesForParts = [];
     for (let i = 0; i < strings.length; i++) {
-        const str = strings[i];
+        let str = strings[i];
+        // Encode slashes in attribute names to prevent browser from splitting them
+        // HTML doesn't allow / in attribute names - browser treats it as whitespace
+        // Replace / with __SLASH__ in attribute context only (before = sign, after last >)
+        if (i < strings.length - 1) {
+            const lastEquals = str.lastIndexOf('=');
+            const lastCloseTag = str.lastIndexOf('>');
+            if (lastEquals > lastCloseTag) {
+                // We're in an attribute context - encode slashes in the attribute name
+                const beforeEquals = str.substring(0, lastEquals);
+                const attrStartIdx = beforeEquals.lastIndexOf('>') + 1;
+                const attrPart = beforeEquals.substring(attrStartIdx);
+                const encodedAttrPart = attrPart.replace(/\//g, '__SLASH__');
+                str = beforeEquals.substring(0, attrStartIdx) + encodedAttrPart + str.substring(lastEquals);
+            }
+        }
         htmlParts.push(str);
         if (i < strings.length - 1) {
             // Check if we're in an attribute context
@@ -995,13 +1010,15 @@ function prepareTemplate(result) {
             const lastEquals = str.lastIndexOf('=');
             const lastCloseTag = str.lastIndexOf('>');
             if (lastEquals > lastCloseTag) {
-                // We're in an attribute value - extract and preserve the original attribute name
+                // We're in an attribute value - extract and preserve the original attribute name (before encoding)
                 let attrStart = lastEquals - 1;
                 while (attrStart >= 0 && /\S/.test(str[attrStart])) {
                     attrStart--;
                 }
                 const attrName = str.substring(attrStart + 1, lastEquals).trim();
-                attrNamesForParts.push(attrName);
+                // Decode the slash encoding to get original name
+                const originalAttrName = attrName.replace(/__SLASH__/g, '/');
+                attrNamesForParts.push(originalAttrName);
                 htmlParts.push(marker);
             }
             else {