cupper-hugo-theme/themes/inclusive-pattern-docs/layouts/shortcodes/demo.html

{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 15 "" }}
<div class="demo-container">
  <div id="demo-{{ $uniq }}">
  </div>
  <template id="template-{{ $uniq }}">
    {{ .Inner }}
  </template>
  <script>
    (function() {
      var root = document.getElementById('demo-{{ $uniq }}');
      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;
      root.shadowRoot.appendChild(document.importNode(template.content, true));
      console.log(root);
    })();
  </script>
</div>