Bug 1416999 - Remove document.registerElement

Tag #1375

2 files changed, 32 insertions, 29 deletions

diff --git a/layout/base/crashtests/1261351-iframe.html b/layout/base/crashtests/1261351-iframe.html
index 82c1e25fa..a0484f332 100644
--- a/layout/base/crashtests/1261351-iframe.html
+++ b/layout/base/crashtests/1261351-iframe.html
@@ -3,23 +3,26 @@
   'use strict';
   // -sp-context: content
   (function () {
-    let proto = Object.create(HTMLDivElement.prototype);
-    proto.template = `<style></style>`;
-    proto.createdCallback = function() {
-    let shadow = this.createShadowRoot();
-    if (this.template) {
-      let te = document.createElement('template');
-      te.innerHTML = this.template;
-      shadow.appendChild(document.importNode(te.content, true));
-    }
-  };
+    class UiComponentTest extends HTMLDivElement {
+      constructor() {
+        super();
+        this.template = `<style></style>`;
+      }
 
-  let UiComponentTest = document.registerElement('ui-component-test', {
-    prototype: proto,
-  });
+      connectedCallback() {
+        let shadow = this.createShadowRoot();
+        if (this.template) {
+          let te = document.createElement('template');
+          te.innerHTML = this.template;
+          shadow.appendChild(document.importNode(te.content, true));
+        }
+      }
+    };
 
-  let uic = new UiComponentTest();
-  document.body.appendChild(uic);
+    customElements.define('ui-component-test', UiComponentTest, { extend: 'div'} );
+
+    let uic = new UiComponentTest();
+    document.body.appendChild(uic);
 
   })();
 </script>
diff --git a/layout/style/crashtests/1017798-1.html b/layout/style/crashtests/1017798-1.html
index 097217d18..0460c8756 100644
--- a/layout/style/crashtests/1017798-1.html
+++ b/layout/style/crashtests/1017798-1.html
@@ -50,27 +50,27 @@ gaia_switch/examples/index.html from the Gaia repository.
 
 window.GaiaSwitch = (function(win) {
   // Extend from the HTMLElement prototype
-  var proto = Object.create(HTMLElement.prototype);
+  class GaiaSwitch extends HTMLElement {
+    connectedCallback() {
+      var shadow = this.createShadowRoot();
+      this._template = template.content.cloneNode(true);
+      this._input = this._template.querySelector('input[type="checkbox"]');
+
+      var checked = this.getAttribute('checked');
+      if (checked !== null) {
+        this._input.checked = true;
+      }
 
-  proto.createdCallback = function() {
-    var shadow = this.createShadowRoot();
-    this._template = template.content.cloneNode(true);
-    this._input = this._template.querySelector('input[type="checkbox"]');
+      shadow.appendChild(this._template);
 
-    var checked = this.getAttribute('checked');
-    if (checked !== null) {
-      this._input.checked = true;
+      ComponentUtils.style.call(this, '');
     }
-
-    shadow.appendChild(this._template);
-
-    ComponentUtils.style.call(this, '');
   };
 
   /**
    * Proxy the checked property to the input element.
    */
-  Object.defineProperty( proto, 'checked', {
+  Object.defineProperty( GaiaSwitch.prototype, 'checked', {
     get: function() {
       return this._input.checked;
     },
@@ -82,7 +82,7 @@ window.GaiaSwitch = (function(win) {
   /**
    * Proxy the name property to the input element.
    */
-  Object.defineProperty( proto, 'name', {
+  Object.defineProperty( GaiaSwitch.prototype, 'name', {
     get: function() {
       return this.getAttribute('name');
     },