title: Modifying a Custom Element class after it's been defined
body: <p>Is it possible to modify a custom element / web component class after it's been registered? This isn't something I'll typically (or ever) want to do in production code, but when prototyping or implementing a code-patching tool for development, it'd be useful. Here's what I've tried, unsuccessfully, so far:</p>
  
  <pre><code>document.body.appendChild(document.createElement('foo-bar')) // empty element
  
  class FooBar extends HTMLElement {
    connectedCallback () {
      this.textContent = 'foo bar'
    }
  }
  
  customElements.define('foo-bar', FooBar) // element shows "foo bar"
  
  FooBar.protoype.connectedCallback = function () {
    this.textContent = 'foo bar 2'
  }
  
  document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2"
  
  customElements.get('foo-bar').protoype.connectedCallback = function () {
    this.textContent = 'foo bar 2'
  }
  
  document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2"
  
  class FooBar2 extends HTMLElement {
    connectedCallback () {
      this.textContent = 'foo bar 2'
    }
  }
  
  customElements.define('foo-bar', FooBar2) // Exception thrown, 'foo-bar' already defined
  </code></pre>
  
  <p>In summation, modifying the class originally passed to the CustomElementsRegistry has no effect. Assigning to the prototype of what's in the registry has no effect. Attempting to assign a new class to the element in the registry isn't possible as an exception is thrown. All three of these behaviors are counter to my experience with almost every aspect of every other JavaScript API. It's extremely unusual, for better or worse, to not be able to mutate something unless it's set to be non-configurable. However, when I inspect if the objects are configurable, the runtime says they are!</p>
  
  <p>Does anyone know of a way to modify/augment a custom element definition after it's been defined?</p>