title: What is the difference between window.customElements.define() and document.registerElement()
body: <p>I have been reading some tutorials about web components (native, no polymer). I have seen two ways to register components and I'm a bit confused what to use. For the second one I actually receive a typescript error in vscode: <code>[ts] Property 'registerElement' does not exist on type 'Document'. Did you mean 'createElement'?</code></p>
  
  <pre><code>/**
   * App
   */
  export class App extends HTMLElement {
  
      constructor() {
          super();
      }
  
      connectedCallback() {
          this.innerHTML = this.template;
      }
  
      get template() {
          return `
          &lt;div&gt;This is a div&lt;/div&gt;
          `;
      }
  }
  
  // What is the difference between these two methods?
  window.customElements.define('vs-app', App);
  document.registerElement('vs-app', App);
  </code></pre>