Gist in Shadow DOM, for react, vue, svetle, and etc.

gist.js

const iframeCode = `
<style>html,body{margin:0;padding:0}</style>
<script>
window.addEventListener("message", (e) => {
  if (e.ports) {
    const channel = e.ports[0]
    const timestamp = e.data.init
    channel.postMessage({'height': document.body.scrollHeight, 'timestamp': timestamp})
  }
})
</script>
`

customElements.define('github-gist', class extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({mode: 'open'})
    const channel = new MessageChannel()
    const iframe = document.createElement('iframe')
    const timestamp = Date.now()
    iframe.setAttribute('frameborder', '0')
    iframe.setAttribute('width', '100%')
    iframe.addEventListener('load', () => {
      iframe.contentWindow.postMessage({'init': timestamp}, '*', [channel.port2])
    })

    channel.port1.onmessage = (event) => {
      if (timestamp == event.data.timestamp) {
        iframe.style.height = event.data.height + 20 + 'px'
      }
    }

    const path = this.getAttribute('path')
    iframe.srcdoc = `<script src="https://gist.github.com/${path}.js"></script>` + iframeCode
    shadow.appendChild(iframe)
  }
})