safer JS demo encapsulation

content/patterns/widgets/example2.md

@@ -38,6 +38,21 @@ p {
 
 <p>Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Nulla lobortis tempus commodo. </p>
 
+{{<demo>}}
+<p>Everyone must not be having a laugh.</p>
+<style>
+p {
+  color: blue !important;
+  font-family: cursive;
+}
+</style>
+<script>
+  demo.querySelector('p').addEventListener('click', function() {
+    alert('fuck');
+  })
+</script>
+{{</demo>}}
+
 {{% ticks %}}
   * Something good
   * Something else good

themes/inclusive-pattern-docs/layouts/shortcodes/demo.html

@@ -11,9 +11,10 @@
       root.attachShadow({mode: 'open'});
       var template = document.getElementById('template-{{ $uniq }}');
       var script = template.content.querySelector('script');
-      script.textContent = 'var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot;' + script.textContent;
+      if (script) {
+        script.textContent = `(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot; ${script.textContent} })()`
+      }
       root.shadowRoot.appendChild(document.importNode(template.content, true));
-      console.log(root);
     })();
   </script>
 </div>