feat(runtime): lower generated runtime ids

req: wire/001

req: ts/001

slhx-js/runtime/slhx.js

@@ -341,7 +341,9 @@
     const scope = root || document;
     const doc = new DOMParser().parseFromString(html, "text/html");
     const template = doc.querySelector("template[data-slhx]");
-    if (!replaceSlot(scope, doc, "content", template ? template.innerHTML : html)) {
+    const lowered = replaceLoweredSlots(scope, doc);
+    const named = replaceSlot(scope, doc, "content", lowered ? undefined : (template ? template.innerHTML : html));
+    if (!lowered && !named) {
       emit(scope, "slhx:missing-content-slot", null);
       return false;
     }
@@ -351,6 +353,19 @@
     return true;
   }
 
+  function replaceLoweredSlots(scope, doc) {
+    let changed = false;
+    doc.querySelectorAll("[data-sid], [data-slot-id]").forEach((source) => {
+      const id = source.getAttribute("data-sid") || source.getAttribute("data-slot-id");
+      const target = scope.querySelector(`[data-sid="${cssEscape(id)}"], [data-slot-id="${cssEscape(id)}"]`);
+      if (target) {
+        target.innerHTML = source.innerHTML;
+        changed = true;
+      }
+    });
+    return changed;
+  }
+
   function replaceSlot(scope, doc, name, fallback) {
     const target = scope.querySelector(`[data-slhx-slot="${name}"], [data-slot="${name}"]`);
     if (!target) return false;