From 6805cefbac074fedb0102ce49a4754f2f7ae531b Mon Sep 17 00:00:00 2001
From: Heydon Pickering <heydon@heydonworks.com>
Date: Thu, 22 Jun 2017 17:13:17 +0100
Subject: [PATCH] safer JS demo encapsulation

---
 content/patterns/widgets/example2.md              | 15 +++++++++++++++
 .../layouts/shortcodes/demo.html                  |  5 +++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/content/patterns/widgets/example2.md b/content/patterns/widgets/example2.md
index 69c721e..806697e 100644
--- a/content/patterns/widgets/example2.md
+++ b/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
diff --git a/themes/inclusive-pattern-docs/layouts/shortcodes/demo.html b/themes/inclusive-pattern-docs/layouts/shortcodes/demo.html
index 9b1d835..aa09ed8 100644
--- a/themes/inclusive-pattern-docs/layouts/shortcodes/demo.html
+++ b/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>