title: `document` doesn't refer to the shadowDom
body: <p>So I have code that's something like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template id="cool-btn-template"&gt;
    &lt;script&gt;
      const button = document.getElementById('click-me');
      button.addEventListener('click', event =&gt; alert(event));
    &lt;/script&gt;
    &lt;style&gt;
      #click-me {
        all: unset;
        background: tomato;
        border: 0;
        border-radius: 4px;
        color: white;
        font-family: Helvetica;
        font-size: 1.5rem;
        padding: .5rem 1rem;
      }
    &lt;/style&gt;
    &lt;button id="click-me"&gt;Log click event&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;cool-btn&gt;&lt;/cool-btn&gt;
  
  &lt;script&gt;
    class CoolBtn extends HTMLElement {
      constructor() {
        super();
        const template = document.getElementById('cool-btn-template');
        const shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.appendChild(template.content.cloneNode(true));
      }
    }
  
    customElements.define('cool-btn', CoolBtn);
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If you run the code, you'll notice that <code>document</code> in the template's script tag refers to the overall document, not the shadowDom. How do I make <code>document</code> mean its shadowDom?</p>