title: Custom Elements v1 in transpiling from Typescript to ECMAScript 5 failing under IE11
body: <p>I'm running into trouble getting a simple web component to work when transpiled to ES5.  It appears to function perfectly fine under chrome, Edge, and Firefox, but IE11 is failing in the component's constructor with "The custom element constructor did not produce the element being upgraded."</p>
  
  <h1>UPDATE</h1>
  
  <p>The excellent work of Oliver Krull below has clearly pinned down the problem to Typescript's compiler output.  Is it possible to make it work?</p>
  
  <p>The original source (in TypeScript):</p>
  
  <pre class="lang-js prettyprint-override"><code>import "./AppDrawer.less"
  
  class AppDrawer extends HTMLElement {
      get open() {
          return this.hasAttribute("open");
      }
  
      set open(val: boolean) {
          val ? this.setAttribute("open", '') : this.removeAttribute('open');
      }
  
      get disabled() {
          return this.hasAttribute("disabled");
      }
  
      set disabled(val: boolean) {
          val ? this.setAttribute("disabled", '') : this.removeAttribute('disabled');
      }
  
      static get observedAttributes() { return ["open"] };
  
      constructor() {
          super();
      }
  
      connectedCallback() {
          this.addEventListener("click", () =&gt; {
              this.open = !this.open;
          })
          this.textContent = this.open ? "OPEN": "CLOSED";
      }
  
      attributeChangedCallback(attr, oldVal, newVal) {
          this.textContent = this.open ? "OPEN": "CLOSED";
      }
  }
  
  
  customElements.define("app-drawer", AppDrawer)
  </code></pre>
  
  <p>The output (<code>bundle.js</code>):</p>
  
  <pre class="lang-js prettyprint-override"><code>(function () {
  'use strict';
  
  function __$styleInject(css) {
      if (!css) return;
  
      if (typeof window == 'undefined') return;
      var style = document.createElement('style');
      style.setAttribute('media', 'screen');
  
      style.innerHTML = css;
      document.head.appendChild(style);
      return css;
  }
  
  __$styleInject("app-drawer {\n  color: red;\n}\n");
  
  function __extends(d, b) {
      for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
      function __() { this.constructor = d; }
      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  }
  
  var AppDrawer = (function (_super) {
      __extends(AppDrawer, _super);
      function AppDrawer() {
          _super.call(this);
      }
      Object.defineProperty(AppDrawer.prototype, "open", {
          get: function () {
              return this.hasAttribute("open");
          },
          set: function (val) {
              val ? this.setAttribute("open", '') : this.removeAttribute('open');
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(AppDrawer.prototype, "disabled", {
          get: function () {
              return this.hasAttribute("disabled");
          },
          set: function (val) {
              val ? this.setAttribute("disabled", '') : this.removeAttribute('disabled');
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(AppDrawer, "observedAttributes", {
          get: function () { return ["open"]; },
          enumerable: true,
          configurable: true
      });
  
      AppDrawer.prototype.connectedCallback = function () {
          var _this = this;
          this.addEventListener("click", function () {
              _this.open = !_this.open;
          });
          this.textContent = this.open ? "OPEN" : "CLOSED";
      };
      AppDrawer.prototype.attributeChangedCallback = function (attr, oldVal, newVal) {
          this.textContent = this.open ? "OPEN" : "CLOSED";
      };
      return AppDrawer;
  }(HTMLElement));
  customElements.define("app-drawer", AppDrawer);
  
  }());
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0-rc.8/webcomponents-lite.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0-rc.8/custom-elements-es5-adapter.js"&gt;&lt;/script&gt;
          &lt;script src="bundle.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;app-drawer open disabled&gt;&lt;/app-drawer&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>