Untitled

<!DOCTYPE html>
<html>
  <head>
    <script>
      const template = document.createElement('template')
      template.innerHTML = `
        <style>#foobar {background: red;}</style>
        <h1 id="foobar">I am foo bar</h1>
        <slot></slot>
      `

      customElements.define('foo-bar', class extends HTMLElement {
        constructor() {
          super()
          this.attachShadow({mode: 'open'})
          this.shadowRoot.appendChild(template.content.cloneNode(true))
        }
      })
    </script>
  </head>
  <body>
    <foo-bar>
      <h2>I use the slot tunnel</h2>
    </foo-bar>
  </body>
</html>