snice 3.9.0 → 3.10.0

package/dist/index.iife.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.
@@ -990,7 +990,22 @@ var Snice = (function (exports) {
         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
@@ -998,13 +1013,15 @@ var Snice = (function (exports) {
                 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 {