non-template based solution

docs/index.html

@@ -25,29 +25,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/coding/code-blocks/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/coding/color-palettes/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/coding/command-line/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/coding/demo-embedding/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/coding/file-trees/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/coding/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/coding/tested/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/coding/writing-inline-demos/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
@@ -532,8 +509,8 @@ toggle.addEventListener('click', (e) => {
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})();';
         script.textContent = wrappedScript;
       }
 
@@ -544,11 +521,26 @@ toggle.addEventListener('click', (e) => {
         root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
+       
+
+
+
       var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
       launchButton.addEventListener('click', function () {
         var standalone = window.open();
-        script.textContent = standaloneScript;
+        script.innerHTML = standaloneScript;
-        standalone.document.body.appendChild(template.content.cloneNode(true));
+        var demoDiv = document.createElement('div');
+        demoDiv.innerHTML = template.innerHTML;
+        standalone.document.body.appendChild(demoDiv);
+        
+        
+        var newScript = standalone.document.createElement('script');
+        var oldScript = standalone.document.querySelector('script');
+        newScript.textContent = oldScript.textContent;
+        oldScript.parentNode.removeChild(oldScript);
+        standalone.document.body.appendChild(newScript);
+
+        
 
         standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
       });

docs/patterns/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/installation/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/library-setup/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/media/including-images/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/media/including-videos/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/media/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/printing/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/serving/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/updating/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/writing/expandable-sections/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/writing/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/writing/library-structure/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/writing/markdown-and-metadata/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/writing/notes-and-warnings/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/writing/references/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/writing/snippets/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/patterns/writing/tables-of-contents/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/print-version/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
@@ -1906,8 +1883,8 @@ toggle.addEventListener('click', (e) => {
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})();';
         script.textContent = wrappedScript;
       }
 
@@ -1918,11 +1895,26 @@ toggle.addEventListener('click', (e) => {
         root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
+       
+
+
+
       var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
       launchButton.addEventListener('click', function () {
         var standalone = window.open();
-        script.textContent = standaloneScript;
+        script.innerHTML = standaloneScript;
-        standalone.document.body.appendChild(template.content.cloneNode(true));
+        var demoDiv = document.createElement('div');
+        demoDiv.innerHTML = template.innerHTML;
+        standalone.document.body.appendChild(demoDiv);
+        
+        
+        var newScript = standalone.document.createElement('script');
+        var oldScript = standalone.document.querySelector('script');
+        newScript.textContent = oldScript.textContent;
+        oldScript.parentNode.removeChild(oldScript);
+        standalone.document.body.appendChild(newScript);
+
+        
 
         standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
       });

docs/tags/markdown/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

docs/tags/metadata/index.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

themes/infusion/layouts/_default/baseof.html

@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="{{ "css/prism.css" | absURL }}">
     <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}">
-    <script>
-      /* Template element polyfill */
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }

themes/infusion/layouts/shortcodes/demo.html

@@ -23,8 +23,8 @@
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})();';
         script.textContent = wrappedScript;
       }
 
@@ -35,7 +35,7 @@
         root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
-      var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
+      /*var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
       launchButton.addEventListener('click', function () {
         var standalone = window.open();
         script.textContent = standaloneScript;
@@ -43,6 +43,27 @@
         {{ if .Get "backgroundColor" }}
           standalone.document.body.style.backgroundColor = {{ .Get "backgroundColor" | safeCSS }};
         {{ end }}
+        standalone.document.title = 'demo ' + {{ $uniq }};
+      });*/
+      var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
+      launchButton.addEventListener('click', function () {
+        var standalone = window.open();
+        script.innerHTML = standaloneScript;
+        var demoDiv = document.createElement('div');
+        demoDiv.innerHTML = template.innerHTML;
+        standalone.document.body.appendChild(demoDiv);
+        
+        // For activating the script :-(
+        var newScript = standalone.document.createElement('script');
+        var oldScript = standalone.document.querySelector('script');
+        newScript.textContent = oldScript.textContent;
+        oldScript.parentNode.removeChild(oldScript);
+        standalone.document.body.appendChild(newScript);
+
+        {{ if .Get "backgroundColor" }}
+          standalone.document.body.style.backgroundColor = {{ .Get "backgroundColor" | safeCSS }};
+        {{ end }}
+
         standalone.document.title = 'demo ' + {{ $uniq }};
       });
     })();