Fix parsing of HTML in model descriptions.

javascript/clusterize.js

@@ -466,6 +466,10 @@ class Clusterize {
         } else {
             content_elem.innerHTML = data;
         }
+
+        // Parse items flagged as containing Shadow DOM entries.
+        convertElementShadowDOM(content_elem, "[data-parse-as-shadow-dom]");
+
         return content_elem.innerHTML;
     }
 

javascript/extraNetworks.js

@@ -18,6 +18,7 @@
     waitForBool,
     copyToClipboard,
     resizeGridSetup,
+    convertElementShadowDOM,
 */
 /*eslint no-undef: "error"*/
 
@@ -313,6 +314,11 @@ class ExtraNetworksTab {
             (data) => {
                 if (data && data.html) {
                     this.card_list.updateHtml(elem, data.html);
+                    // If this model's detail is displayed, update it.
+                    const desc_elem = this.container_elem.querySelector(".model-info--name");
+                    if (isElement(desc_elem) && desc_elem.textContent === elem.dataset.name) {
+                        this.showDetsView(elem);
+                    }
                 }
             },
         );
@@ -927,7 +933,10 @@ class ExtraNetworksTab {
                 div_dets.innerHTML = "Error parsing model details.";
                 return;
             }
+
             div_dets.innerHTML = response.html;
+
+            convertElementShadowDOM(div_dets, "[data-parse-as-shadow-dom]");
         };
 
         _clear_details();

javascript/extraNetworksClusterize.js

@@ -12,6 +12,7 @@
     isElementLogError,
     keyExistsLogError,
     htmlStringToElement,
+    convertElementShadowDOM,
 */
 /*eslint no-undef: "error"*/
 
@@ -260,6 +261,7 @@ class ExtraNetworksClusterize extends Clusterize {
                 return;
             }
             const parsed_html = htmlStringToElement(new_html);
+            convertElementShadowDOM(parsed_html, "[data-parse-as-shadow-dom]");
 
             // replace the element in DOM with our new element
             elem.replaceWith(parsed_html);

javascript/utils.js

@@ -615,6 +615,38 @@ function htmlStringToFragment(s) {
     return document.createRange().createContextualFragment(s);
 }
 
+function convertInnerHtmlToShadowDOM(elem) {
+    /** Inplace conversion of innerHTML of an element into a Shadow DOM.
+     *
+     *  If the innerHTML is not valid HTML then the innerHTML is left unchanged.
+    */
+    const parsed_str = new DOMParser().parseFromString(elem.innerHTML, "text/html").documentElement.textContent;
+    const parsed_elem = htmlStringToElement(parsed_str);
+    if (!isNullOrUndefined(parsed_elem)) {
+        elem.innerHTML = "";
+        const shadow = elem.attachShadow({mode: "open"});
+        shadow.appendChild(parsed_elem);
+    }
+}
+
+function convertElementShadowDOM(elem, selector) {
+    /** Inplace conversion of Shadow DOM of all children matching the passed selector.
+     *
+     *  `selector` defaults to [data-parse-as-shadow-dom] if not a valid string.
+     *
+     *  NOTE: Nested Shadow DOMs are untested but will likely not work.
+    */
+    if (!isString(selector)) {
+        selector = "[data-parse-as-shadow-dom]";
+    }
+
+    let children = Array.from(elem.querySelectorAll(selector));
+    children = children.filter(x => x.innerHTML !== "");
+    for (const child of children) {
+        convertInnerHtmlToShadowDOM(child);
+    }
+}
+
 function toggleCss(key, css, enable) {
     var style = document.getElementById(key);
     if (enable && !style) {