hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

safer JS demo encapsulation

Browse Source
This commit is contained in:
Heydon Pickering 2017-06-22 17:13:17 +01:00
parent 5e201b8d71
commit 6805cefbac
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
content/patterns/widgets/example2.md
View File

@ -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

5
themes/inclusive-pattern-docs/layouts/shortcodes/demo.html
View File

@ -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>