From cedff6e214eb07afff9756608475db289d9aaff2 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <email@mattatobin.com>
Date: Fri, 17 Apr 2020 07:07:09 -0400
Subject: [PATCH] Bug 1416999 - Remove document.registerElement

Tag #1375
---
 dom/base/CustomElementRegistry.cpp            |  19 +-
 dom/base/CustomElementRegistry.h              |  10 +-
 dom/base/Element.cpp                          |  41 +--
 dom/base/nsContentUtils.cpp                   |  29 --
 dom/base/nsContentUtils.h                     |   7 +-
 dom/base/nsDocument.cpp                       | 247 ------------------
 dom/base/nsDocument.h                         |  11 -
 dom/base/nsIDocument.h                        |   9 -
 dom/base/test/chrome/chrome.ini               |   8 +-
 dom/base/test/chrome/registerElement_ep.js    |   8 -
 .../chrome/test_registerElement_content.xul   |  52 ----
 .../test/chrome/test_registerElement_ep.xul   |  44 ----
 dom/base/test/mochitest.ini                   |   2 +-
 dom/base/test/test_document_register.html     |   6 +-
 dom/html/test/mochitest.ini                   |   1 -
 dom/html/test/test_bug1081037.html            | 133 ----------
 .../mochitest/webcomponents/mochitest.ini     |   5 +-
 ...est_custom_element_callback_innerhtml.html |  26 +-
 ...om_element_register_invalid_callbacks.html |  69 -----
 .../test_document_register_parser.html        |  47 ----
 .../test_document_shared_registry.html        |  46 ----
 .../test_template_custom_elements.html        |  32 ---
 .../test_unresolved_pseudo_class.html         |  26 +-
 dom/webidl/Document.webidl                    |   7 -
 dom/webidl/WebComponents.webidl               |   5 -
 .../tests/mochitest/test_bug1094930.html      |  10 +-
 layout/base/crashtests/1261351-iframe.html    |  33 +--
 layout/style/crashtests/1017798-1.html        |  28 +-
 28 files changed, 82 insertions(+), 879 deletions(-)
 delete mode 100644 dom/base/test/chrome/registerElement_ep.js
 delete mode 100644 dom/base/test/chrome/test_registerElement_content.xul
 delete mode 100644 dom/base/test/chrome/test_registerElement_ep.xul
 delete mode 100644 dom/html/test/test_bug1081037.html
 delete mode 100644 dom/tests/mochitest/webcomponents/test_custom_element_register_invalid_callbacks.html
 delete mode 100644 dom/tests/mochitest/webcomponents/test_document_register_parser.html
 delete mode 100644 dom/tests/mochitest/webcomponents/test_document_shared_registry.html
 delete mode 100644 dom/tests/mochitest/webcomponents/test_template_custom_elements.html

diff --git a/dom/base/CustomElementRegistry.cpp b/dom/base/CustomElementRegistry.cpp
index e4d4c0670f..67bd8e185d 100644
--- a/dom/base/CustomElementRegistry.cpp
+++ b/dom/base/CustomElementRegistry.cpp
@@ -414,19 +414,6 @@ CustomElementRegistry::EnqueueLifecycleCallback(nsIDocument::ElementCallbackType
   reactionsStack->EnqueueCallbackReaction(aCustomElement, Move(callback));
 }
 
-void
-CustomElementRegistry::GetCustomPrototype(nsIAtom* aAtom,
-                                          JS::MutableHandle<JSObject*> aPrototype)
-{
-  mozilla::dom::CustomElementDefinition* definition =
-    mCustomDefinitions.GetWeak(aAtom);
-  if (definition) {
-    aPrototype.set(definition->mPrototype);
-  } else {
-    aPrototype.set(nullptr);
-  }
-}
-
 void
 CustomElementRegistry::UpgradeCandidates(nsIAtom* aKey,
                                          CustomElementDefinition* aDefinition,
@@ -624,9 +611,9 @@ CustomElementRegistry::Define(const nsAString& aName,
        */
       JSAutoCompartment ac(cx, constructor);
       JS::Rooted<JS::Value> prototypev(cx);
-      // The .prototype on the constructor passed from document.registerElement
-      // is the "expando" of a wrapper. So we should get it from wrapper instead
-      // instead of underlying object.
+      // The .prototype on the constructor passed could be an "expando" of a
+      // wrapper. So we should get it from wrapper instead of the underlying
+      // object.
       if (!JS_GetProperty(cx, constructor, "prototype", &prototypev)) {
         aRv.StealExceptionFromJSContext(cx);
         return;
diff --git a/dom/base/CustomElementRegistry.h b/dom/base/CustomElementRegistry.h
index c416e50439..a736e3019d 100644
--- a/dom/base/CustomElementRegistry.h
+++ b/dom/base/CustomElementRegistry.h
@@ -423,9 +423,6 @@ public:
                                        LifecycleAdoptedCallbackArgs* aAdoptedCallbackArgs,
                                        CustomElementDefinition* aDefinition);
 
-  void GetCustomPrototype(nsIAtom* aAtom,
-                          JS::MutableHandle<JSObject*> aPrototype);
-
   /**
    * Upgrade an element.
    * https://html.spec.whatwg.org/multipage/scripting.html#upgrades
@@ -434,8 +431,7 @@ public:
 
   /**
    * Registers an unresolved custom element that is a candidate for
-   * upgrade when the definition is registered via registerElement.
-   * |aTypeName| is the name of the custom element type, if it is not
+   * upgrade. |aTypeName| is the name of the custom element type, if it is not
    * provided, then element name is used. |aTypeName| should be provided
    * when registering a custom element that extends an existing
    * element. e.g. <button is="x-button">.
@@ -472,8 +468,8 @@ private:
                         js::SystemAllocPolicy> ConstructorMap;
 
   // Hashtable for custom element definitions in web components.
-  // Custom prototypes are stored in the compartment where
-  // registerElement was called.
+  // Custom prototypes are stored in the compartment where definition was
+  // defined.
   DefinitionMap mCustomDefinitions;
 
   // Hashtable for looking up definitions by using constructor as key.
diff --git a/dom/base/Element.cpp b/dom/base/Element.cpp
index cd803a60f9..f3c8a1129e 100644
--- a/dom/base/Element.cpp
+++ b/dom/base/Element.cpp
@@ -469,50 +469,11 @@ Element::GetBindingURL(nsIDocument *aDocument, css::URLValue **aResult)
 JSObject*
 Element::WrapObject(JSContext *aCx, JS::Handle<JSObject*> aGivenProto)
 {
-  JS::Rooted<JSObject*> givenProto(aCx, aGivenProto);
-  JS::Rooted<JSObject*> customProto(aCx);
-
-  if (!givenProto) {
-    // Custom element prototype swizzling.
-    CustomElementData* data = GetCustomElementData();
-    if (data) {
-      // If this is a registered custom element then fix the prototype.
-      nsContentUtils::GetCustomPrototype(OwnerDoc(), NodeInfo()->NamespaceID(),
-                                         data->GetCustomElementType(), &customProto);
-      if (customProto &&
-          NodePrincipal()->SubsumesConsideringDomain(nsContentUtils::ObjectPrincipal(customProto))) {
-        // The custom element prototype could be in different compartment.
-        if (!JS_WrapObject(aCx, &customProto)) {
-          return nullptr;
-        }
-        // Just go ahead and create with the right proto up front.  Set
-        // customProto to null to flag that we don't need to do any post-facto
-        // proto fixups here.
-        givenProto = customProto;
-        customProto = nullptr;
-      }
-    }
-  }
-
-  JS::Rooted<JSObject*> obj(aCx, nsINode::WrapObject(aCx, givenProto));
+  JS::Rooted<JSObject*> obj(aCx, nsINode::WrapObject(aCx, aGivenProto));
   if (!obj) {
     return nullptr;
   }
 
-  if (customProto) {
-    // We want to set the custom prototype in the compartment where it was
-    // registered. In the case that |obj| and |prototype| are in different
-    // compartments, this will set the prototype on the |obj|'s wrapper and
-    // thus only visible in the wrapper's compartment, since we know obj's
-    // principal does not subsume customProto's in this case.
-    JSAutoCompartment ac(aCx, customProto);
-    JS::Rooted<JSObject*> wrappedObj(aCx, obj);
-    if (!JS_WrapObject(aCx, &wrappedObj) ||
-        !JS_SetPrototype(aCx, wrappedObj, customProto)) {
-      return nullptr;
-    }
-  }
-
   nsIDocument* doc;
   if (HasFlag(NODE_FORCE_XBL_BINDINGS)) {
     doc = OwnerDoc();
diff --git a/dom/base/nsContentUtils.cpp b/dom/base/nsContentUtils.cpp
index 96f9065803..3d23bedea5 100644
--- a/dom/base/nsContentUtils.cpp
+++ b/dom/base/nsContentUtils.cpp
@@ -9673,35 +9673,6 @@ nsContentUtils::EnqueueLifecycleCallback(nsIDocument::ElementCallbackType aType,
                                                   aDefinition);
 }
 
-/* static */ void
-nsContentUtils::GetCustomPrototype(nsIDocument* aDoc,
-                                   int32_t aNamespaceID,
-                                   nsIAtom* aAtom,
-                                   JS::MutableHandle<JSObject*> aPrototype)
-{
-  MOZ_ASSERT(aDoc);
-
-  // To support imported document.
-  nsCOMPtr<nsIDocument> doc = aDoc->MasterDocument();
-
-  if (aNamespaceID != kNameSpaceID_XHTML ||
-      !doc->GetDocShell()) {
-    return;
-  }
-
-  nsCOMPtr<nsPIDOMWindowInner> window(doc->GetInnerWindow());
-  if (!window) {
-    return;
-  }
-
-  RefPtr<CustomElementRegistry> registry(window->CustomElements());
-  if (!registry) {
-    return;
-  }
-
-  return registry->GetCustomPrototype(aAtom, aPrototype);
-}
-
 /* static */ bool
 nsContentUtils::AttemptLargeAllocationLoad(nsIHttpChannel* aChannel)
 {
diff --git a/dom/base/nsContentUtils.h b/dom/base/nsContentUtils.h
index c34f7e1026..fe076f0dc6 100644
--- a/dom/base/nsContentUtils.h
+++ b/dom/base/nsContentUtils.h
@@ -589,7 +589,7 @@ public:
 
   /**
    * Returns true if |aName| is a valid name to be registered via
-   * document.registerElement.
+   * customElements.define.
    */
   static bool IsCustomElementName(nsIAtom* aName);
 
@@ -2742,11 +2742,6 @@ public:
                                        mozilla::dom::LifecycleAdoptedCallbackArgs* aAdoptedCallbackArgs = nullptr,
                                        mozilla::dom::CustomElementDefinition* aDefinition = nullptr);
 
-  static void GetCustomPrototype(nsIDocument* aDoc,
-                                 int32_t aNamespaceID,
-                                 nsIAtom* aAtom,
-                                 JS::MutableHandle<JSObject*> prototype);
-
   static bool AttemptLargeAllocationLoad(nsIHttpChannel* aChannel);
 
   /**
diff --git a/dom/base/nsDocument.cpp b/dom/base/nsDocument.cpp
index 87d860c6ae..d69fff8637 100644
--- a/dom/base/nsDocument.cpp
+++ b/dom/base/nsDocument.cpp
@@ -5352,31 +5352,6 @@ bool IsLowercaseASCII(const nsAString& aValue)
   return true;
 }
 
-already_AddRefed<mozilla::dom::CustomElementRegistry>
-nsDocument::GetCustomElementRegistry()
-{
-  nsAutoString contentType;
-  GetContentType(contentType);
-  if (!IsHTMLDocument() &&
-      !contentType.EqualsLiteral("application/xhtml+xml")) {
-    return nullptr;
-  }
-
-  nsCOMPtr<nsPIDOMWindowInner> window(
-    do_QueryInterface(mScriptGlobalObject ? mScriptGlobalObject
-                                          : GetScopeObject()));
-  if (!window) {
-    return nullptr;
-  }
-
-  RefPtr<CustomElementRegistry> registry = window->CustomElements();
-  if (!registry) {
-    return nullptr;
-  }
-
-  return registry.forget();
-}
-
 // We only support pseudo-elements with two colons in this function.
 static CSSPseudoElementType
 GetPseudoElementType(const nsString& aString, ErrorResult& aRv)
@@ -5692,103 +5667,6 @@ nsIDocument::CreateAttributeNS(const nsAString& aNamespaceURI,
   return attribute.forget();
 }
 
-bool
-nsDocument::CustomElementConstructor(JSContext* aCx, unsigned aArgc, JS::Value* aVp)
-{
-  JS::CallArgs args = JS::CallArgsFromVp(aArgc, aVp);
-
-  JS::Rooted<JSObject*> global(aCx,
-    JS_GetGlobalForObject(aCx, &args.callee()));
-  RefPtr<nsGlobalWindow> window;
-  UNWRAP_OBJECT(Window, global, window);
-  MOZ_ASSERT(window, "Should have a non-null window");
-
-  nsDocument* document = static_cast<nsDocument*>(window->GetDoc());
-
-  // Function name is the type of the custom element.
-  JSString* jsFunName =
-    JS_GetFunctionId(JS_ValueToFunction(aCx, args.calleev()));
-  nsAutoJSString elemName;
-  if (!elemName.init(aCx, jsFunName)) {
-    return true;
-  }
-
-  RefPtr<mozilla::dom::CustomElementRegistry> registry = window->CustomElements();
-  if (!registry) {
-    return true;
-  }
-
-  nsCOMPtr<nsIAtom> typeAtom(NS_Atomize(elemName));
-  CustomElementDefinition* definition =
-    registry->mCustomDefinitions.GetWeak(typeAtom);
-  if (!definition) {
-    return true;
-  }
-
-  RefPtr<Element> element;
-
-  // We integrate with construction stack and do prototype swizzling here, so
-  // that old upgrade behavior could also share the new upgrade steps.
-  // And this old upgrade will be remove at some point (when everything is
-  // switched to latest custom element spec).
-  nsTArray<RefPtr<nsGenericHTMLElement>>& constructionStack =
-    definition->mConstructionStack;
-  if (constructionStack.Length()) {
-    element = constructionStack.LastElement();
-    NS_ENSURE_TRUE(element != ALEADY_CONSTRUCTED_MARKER, false);
-
-    // Do prototype swizzling if dom reflector exists.
-    JS::Rooted<JSObject*> reflector(aCx, element->GetWrapper());
-    if (reflector) {
-      Maybe<JSAutoCompartment> ac;
-      JS::Rooted<JSObject*> prototype(aCx, definition->mPrototype);
-      if (element->NodePrincipal()->SubsumesConsideringDomain(nsContentUtils::ObjectPrincipal(prototype))) {
-        ac.emplace(aCx, reflector);
-        if (!JS_WrapObject(aCx, &prototype) ||
-            !JS_SetPrototype(aCx, reflector, prototype)) {
-          return false;
-        }
-      } else {
-        // We want to set the custom prototype in the compartment where it was
-        // registered. We store the prototype from define() without unwrapped,
-        // hence the prototype's compartment is the compartment where it was
-        // registered.
-        // In the case that |reflector| and |prototype| are in different
-        // compartments, this will set the prototype on the |reflector|'s wrapper
-        // and thus only visible in the wrapper's compartment, since we know
-        // reflector's principal does not subsume prototype's in this case.
-        ac.emplace(aCx, prototype);
-        if (!JS_WrapObject(aCx, &reflector) ||
-            !JS_SetPrototype(aCx, reflector, prototype)) {
-          return false;
-        }
-      }
-
-      // Wrap into current context.
-      if (!JS_WrapObject(aCx, &reflector)) {
-        return false;
-      }
-
-      args.rval().setObject(*reflector);
-      return true;
-    }
-  } else {
-    nsDependentAtomString localName(definition->mLocalName);
-    element =
-      document->CreateElem(localName, nullptr, kNameSpaceID_XHTML,
-                           (definition->mLocalName != typeAtom) ? &elemName
-                                                                : nullptr);
-    NS_ENSURE_TRUE(element, false);
-  }
-
-  // The prototype setup happens in Element::WrapObject().
-
-  nsresult rv = nsContentUtils::WrapNative(aCx, element, element, args.rval());
-  NS_ENSURE_SUCCESS(rv, true);
-
-  return true;
-}
-
 bool
 nsDocument::IsWebComponentsEnabled(JSContext* aCx, JSObject* aObject)
 {
@@ -5842,131 +5720,6 @@ nsDocument::IsWebComponentsEnabled(nsPIDOMWindowInner* aWindow)
   return false;
 }
 
-void
-nsDocument::RegisterElement(JSContext* aCx, const nsAString& aType,
-                            const ElementRegistrationOptions& aOptions,
-                            JS::MutableHandle<JSObject*> aRetval,
-                            ErrorResult& rv)
-{
-  RefPtr<CustomElementRegistry> registry(GetCustomElementRegistry());
-  if (!registry) {
-    rv.Throw(NS_ERROR_DOM_NOT_SUPPORTED_ERR);
-    return;
-  }
-
-  AutoCEReaction ceReaction(this->GetDocGroup()->CustomElementReactionsStack(),
-                            aCx);
-  // Unconditionally convert TYPE to lowercase.
-  nsAutoString lcType;
-  nsContentUtils::ASCIIToLower(aType, lcType);
-
-  nsIGlobalObject* sgo = GetScopeObject();
-  if (!sgo) {
-    rv.Throw(NS_ERROR_UNEXPECTED);
-    return;
-  }
-
-  JS::Rooted<JSObject*> global(aCx, sgo->GetGlobalJSObject());
-  JS::Rooted<JSObject*> protoObject(aCx);
-
-  if (!aOptions.mPrototype) {
-    JS::Rooted<JSObject*> htmlProto(aCx);
-    htmlProto = HTMLElementBinding::GetProtoObjectHandle(aCx);
-    if (!htmlProto) {
-      rv.Throw(NS_ERROR_OUT_OF_MEMORY);
-      return;
-    }
-
-    protoObject = JS_NewObjectWithGivenProto(aCx, nullptr, htmlProto);
-    if (!protoObject) {
-      rv.Throw(NS_ERROR_UNEXPECTED);
-      return;
-    }
-  } else {
-    protoObject = aOptions.mPrototype;
-
-    // Get the unwrapped prototype to do some checks.
-    JS::Rooted<JSObject*> protoObjectUnwrapped(aCx, js::CheckedUnwrap(protoObject));
-    if (!protoObjectUnwrapped) {
-      // If the caller's compartment does not have permission to access the
-      // unwrapped prototype then throw.
-      rv.Throw(NS_ERROR_DOM_SECURITY_ERR);
-      return;
-    }
-
-    // If PROTOTYPE is already an interface prototype object for any interface
-    // object or PROTOTYPE has a non-configurable property named constructor,
-    // throw a NotSupportedError and stop.
-    const js::Class* clasp = js::GetObjectClass(protoObjectUnwrapped);
-    if (IsDOMIfaceAndProtoClass(clasp)) {
-      rv.Throw(NS_ERROR_DOM_NOT_SUPPORTED_ERR);
-      return;
-    }
-
-    JS::Rooted<JS::PropertyDescriptor> descRoot(aCx);
-    JS::MutableHandle<JS::PropertyDescriptor> desc(&descRoot);
-    // This check may go through a wrapper, but as we checked above
-    // it should be transparent or an xray. This should be fine for now,
-    // until the spec is sorted out.
-    if (!JS_GetPropertyDescriptor(aCx, protoObject, "constructor", desc)) {
-      rv.Throw(NS_ERROR_UNEXPECTED);
-      return;
-    }
-
-    if (!desc.configurable()) {
-      rv.Throw(NS_ERROR_DOM_NOT_SUPPORTED_ERR);
-      return;
-    }
-  }
-
-  JS::Rooted<JSFunction*> constructor(aCx);
-  {
-    // Go into the document's global compartment when creating the constructor
-    // function because we want to get the correct document (where the
-    // definition is registered) when it is called.
-    JSAutoCompartment ac(aCx, global);
-
-    // Create constructor to return. Store the name of the custom element as the
-    // name of the function.
-    constructor = JS_NewFunction(aCx, nsDocument::CustomElementConstructor, 0,
-                                 JSFUN_CONSTRUCTOR,
-                                 NS_ConvertUTF16toUTF8(lcType).get());
-    if (!constructor) {
-      rv.Throw(NS_ERROR_OUT_OF_MEMORY);
-      return;
-    }
-  }
-
-  JS::Rooted<JSObject*> wrappedConstructor(aCx);
-  wrappedConstructor = JS_GetFunctionObject(constructor);
-  if (!JS_WrapObject(aCx, &wrappedConstructor)) {
-    rv.Throw(NS_ERROR_DOM_NOT_SUPPORTED_ERR);
-    return;
-  }
-
-  if (!JS_LinkConstructorAndPrototype(aCx, wrappedConstructor, protoObject)) {
-    rv.Throw(NS_ERROR_DOM_NOT_SUPPORTED_ERR);
-    return;
-  }
-
-  ElementDefinitionOptions options;
-  if (!aOptions.mExtends.IsVoid()) {
-    // Only convert NAME to lowercase in HTML documents.
-    nsAutoString lcName;
-    IsHTMLDocument() ? nsContentUtils::ASCIIToLower(aOptions.mExtends, lcName)
-                     : lcName.Assign(aOptions.mExtends);
-
-    options.mExtends.Construct(lcName);
-  }
-
-  RootedCallback<OwningNonNull<binding_detail::FastFunction>> functionConstructor(aCx);
-  functionConstructor = new binding_detail::FastFunction(aCx, wrappedConstructor, sgo);
-
-  registry->Define(lcType, functionConstructor, options, rv);
-
-  aRetval.set(wrappedConstructor);
-}
-
 NS_IMETHODIMP
 nsDocument::GetElementsByTagName(const nsAString& aTagname,
                                  nsIDOMNodeList** aReturn)
diff --git a/dom/base/nsDocument.h b/dom/base/nsDocument.h
index 79b7f18f4f..de2d19cdf9 100644
--- a/dom/base/nsDocument.h
+++ b/dom/base/nsDocument.h
@@ -1129,11 +1129,6 @@ public:
   // WebIDL bits
   virtual mozilla::dom::DOMImplementation*
     GetImplementation(mozilla::ErrorResult& rv) override;
-  virtual void
-    RegisterElement(JSContext* aCx, const nsAString& aName,
-                    const mozilla::dom::ElementRegistrationOptions& aOptions,
-                    JS::MutableHandle<JSObject*> aRetval,
-                    mozilla::ErrorResult& rv) override;
   virtual mozilla::dom::StyleSheetList* StyleSheets() override;
   virtual void SetSelectedStyleSheetSet(const nsAString& aSheetSet) override;
   virtual void GetLastStyleSheetSet(nsString& aSheetSet) override;
@@ -1385,13 +1380,7 @@ protected:
   // non-null when this document is in fullscreen mode.
   nsWeakPtr mFullscreenRoot;
 
-private:
-  static bool CustomElementConstructor(JSContext* aCx, unsigned aArgc, JS::Value* aVp);
-
 public:
-  virtual already_AddRefed<mozilla::dom::CustomElementRegistry>
-    GetCustomElementRegistry() override;
-
   // Check whether web components are enabled for the global of aObject.
   static bool IsWebComponentsEnabled(JSContext* aCx, JSObject* aObject);
   // Check whether web components are enabled for the global of the document
diff --git a/dom/base/nsIDocument.h b/dom/base/nsIDocument.h
index 125816c954..3088736bd2 100644
--- a/dom/base/nsIDocument.h
+++ b/dom/base/nsIDocument.h
@@ -133,7 +133,6 @@ class DOMIntersectionObserver;
 class DOMStringList;
 class Element;
 struct ElementCreationOptions;
-struct ElementRegistrationOptions;
 class Event;
 class EventTarget;
 class FontFaceSet;
@@ -2587,14 +2586,6 @@ public:
 
   nsIDocument* GetTopLevelContentDocument();
 
-  virtual void
-    RegisterElement(JSContext* aCx, const nsAString& aName,
-                    const mozilla::dom::ElementRegistrationOptions& aOptions,
-                    JS::MutableHandle<JSObject*> aRetval,
-                    mozilla::ErrorResult& rv) = 0;
-  virtual already_AddRefed<mozilla::dom::CustomElementRegistry>
-    GetCustomElementRegistry() = 0;
-
   already_AddRefed<nsContentList>
   GetElementsByTagName(const nsAString& aTagName)
   {
diff --git a/dom/base/test/chrome/chrome.ini b/dom/base/test/chrome/chrome.ini
index 765bbd2dfb..c6ee423918 100644
--- a/dom/base/test/chrome/chrome.ini
+++ b/dom/base/test/chrome/chrome.ini
@@ -18,8 +18,8 @@ support-files =
   file_bug1209621.xul
   fileconstructor_file.png
   frame_bug814638.xul
-  frame_registerElement_content.html
-  registerElement_ep.js
+  frame_custom_element_content.html
+  custom_element_ep.js
   host_bug814638.xul
   window_nsITextInputProcessor.xul
   title_window.xul
@@ -62,8 +62,8 @@ support-files = ../file_bug357450.js
 [test_bug1139964.xul]
 [test_bug1209621.xul]
 [test_cpows.xul]
-[test_registerElement_content.xul]
-[test_registerElement_ep.xul]
+[test_custom_element_content.xul]
+[test_custom_element_ep.xul]
 [test_domparsing.xul]
 [test_fileconstructor.xul]
 [test_fileconstructor_tempfile.xul]
diff --git a/dom/base/test/chrome/registerElement_ep.js b/dom/base/test/chrome/registerElement_ep.js
deleted file mode 100644
index 9189593c0a..0000000000
--- a/dom/base/test/chrome/registerElement_ep.js
+++ /dev/null
@@ -1,8 +0,0 @@
-var proto = Object.create(HTMLElement.prototype);
-proto.magicNumber = 42;
-proto.connectedCallback = function() {
-  finishTest(this.magicNumber === 42);
-};
-document.registerElement("x-foo", { prototype: proto });
-
-document.firstChild.appendChild(document.createElement("x-foo"));
diff --git a/dom/base/test/chrome/test_registerElement_content.xul b/dom/base/test/chrome/test_registerElement_content.xul
deleted file mode 100644
index bf00ed53d2..0000000000
--- a/dom/base/test/chrome/test_registerElement_content.xul
+++ /dev/null
@@ -1,52 +0,0 @@
-<?xml version="1.0"?>
-<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
-<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css"
-                 type="text/css"?>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=1130028
--->
-<window title="Mozilla Bug 1130028"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <script type="application/javascript"
-          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-
-  <!-- test results are displayed in the html:body -->
-  <body xmlns="http://www.w3.org/1999/xhtml">
-  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1130028"
-     target="_blank">Mozilla Bug 1130028</a>
-  <iframe onload="startTests()" id="frame" src="http://example.com/chrome/dom/base/test/chrome/frame_registerElement_content.html"></iframe>
-  </body>
-
-  <!-- test code goes here -->
-  <script type="application/javascript"><![CDATA[
-
-  /** Test for Bug 1130028 **/
-  var connectedCallbackCount = 0;
-
-  // Callback should be called only once by element created in content.
-  function connectedCallbackCalled() {
-    connectedCallbackCount++;
-    is(connectedCallbackCount, 1, "Connected callback called, should be called once in test.");
-    is(this.magicNumber, 42, "Callback should be able to see the custom prototype.");
-  }
-
-  function startTests() {
-    var frame = $("frame");
-
-    var c = frame.contentDocument.registerElement("x-foo");
-    var elem = new c();
-    is(elem.tagName, "X-FOO", "Constructor should create an x-foo element.");
-
-    var proto = Object.create(frame.contentWindow.HTMLElement.prototype);
-    proto.magicNumber = 42;
-    proto.connectedCallback = connectedCallbackCalled;
-
-    frame.contentDocument.registerElement("x-bar", { prototype: proto });
-    is(connectedCallbackCount, 1, "Connected callback should be called by element created in content.");
-
-    var element = frame.contentDocument.createElement("x-bar");
-    is(element.magicNumber, 42, "Should be able to see the custom prototype on created element.");
-  }
-
-  ]]></script>
-</window>
diff --git a/dom/base/test/chrome/test_registerElement_ep.xul b/dom/base/test/chrome/test_registerElement_ep.xul
deleted file mode 100644
index b6a160c2e8..0000000000
--- a/dom/base/test/chrome/test_registerElement_ep.xul
+++ /dev/null
@@ -1,44 +0,0 @@
-<?xml version="1.0"?>
-<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
-<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css"
-                 type="text/css"?>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=1130028
--->
-<window title="Mozilla Bug 1130028"
-  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <script type="application/javascript"
-          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-
-  <!-- test results are displayed in the html:body -->
-  <body xmlns="http://www.w3.org/1999/xhtml">
-  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1130028"
-     target="_blank">Mozilla Bug 1130028</a>
-  <iframe onload="startTests()" id="frame" src="http://example.com/chrome/dom/base/test/chrome/frame_registerElement_content.html"></iframe>
-  </body>
-
-  <!-- test code goes here -->
-  <script type="application/javascript"><![CDATA[
-
-  Components.utils.import("resource://gre/modules/Services.jsm");
-
-  /** Test for Bug 1130028 **/
-  SimpleTest.waitForExplicitFinish();
-
-  function finishTest(canSeePrototype) {
-    ok(true, "connectedCallback called when reigsterElement was called with an extended principal.");
-    ok(canSeePrototype, "connectedCallback should be able to see custom prototype.");
-    SimpleTest.finish();
-  }
-
-  function startTests() {
-    var frame = $("frame");
-
-    // Create a sandbox with an extended principal then run a script that registers a custom element in the sandbox.
-    var sandbox = Components.utils.Sandbox([frame.contentWindow], { sandboxPrototype: frame.contentWindow });
-    sandbox.finishTest = finishTest;
-    Services.scriptloader.loadSubScript("chrome://mochitests/content/chrome/dom/base/test/chrome/registerElement_ep.js", sandbox);
-  }
-
-  ]]></script>
-</window>
diff --git a/dom/base/test/mochitest.ini b/dom/base/test/mochitest.ini
index 3dfd666f80..928727f81d 100644
--- a/dom/base/test/mochitest.ini
+++ b/dom/base/test/mochitest.ini
@@ -630,7 +630,7 @@ skip-if = toolkit == 'android' #bug 904183
 [test_document.all_unqualified.html]
 [test_document_constructor.html]
 [test_document_importNode_document.html]
-[test_document_register.html]
+[test_custom_element.html]
 [test_domcursor.html]
 [test_domparser_null_char.html]
 [test_domparsing.html]
diff --git a/dom/base/test/test_document_register.html b/dom/base/test/test_document_register.html
index 6cf15a52f2..7de2351084 100644
--- a/dom/base/test/test_document_register.html
+++ b/dom/base/test/test_document_register.html
@@ -13,8 +13,10 @@
     SimpleTest.waitForExplicitFinish();
 
     function startTests() {
-      var c = document.getElementById("fooframe").contentDocument.registerElement("x-foo");
-      var elem = new c();
+      var frame = document.getElementById("fooframe");
+      class XFoo extends frame.contentWindow.HTMLElement {};
+      frame.contentWindow.customElements.define("x-foo", XFoo);
+      var elem = new XFoo();
       is(elem.tagName, "X-FOO", "Constructor should create an x-foo element.");
 
       var anotherElem = $("fooframe").contentDocument.createElement("x-foo");
diff --git a/dom/html/test/mochitest.ini b/dom/html/test/mochitest.ini
index 4a50a9c3f5..5c9c66e614 100644
--- a/dom/html/test/mochitest.ini
+++ b/dom/html/test/mochitest.ini
@@ -569,7 +569,6 @@ support-files = file_cookiemanager.js
 support-files = file_bug871161-1.html file_bug871161-2.html
 [test_bug1013316.html]
 [test_hash_encoded.html]
-[test_bug1081037.html]
 [test_window_open_close.html]
 tags = openwindow
 [test_viewport_resize.html]
diff --git a/dom/html/test/test_bug1081037.html b/dom/html/test/test_bug1081037.html
deleted file mode 100644
index 9d87825802..0000000000
--- a/dom/html/test/test_bug1081037.html
+++ /dev/null
@@ -1,133 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=1081037
--->
-<head>
-  <meta charset="utf-8">
-  <title>Test for Bug 1081037</title>
-  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
-  <script type="application/javascript">
-
-  /** Test for Bug 1081037 **/
-
-function shouldThrow(fun, msg, ex, todo) {
-  try {
-    fun();
-    ok(todo, msg);
-  } catch (e) {
-    ok(new RegExp(ex).test(e), msg + " (thrown:" + e + ")")
-  }
-}
-
-var Foo = document.registerElement('x-foo', {
-  prototype: {bar: 5}
-});
-
-Foo.prototype.bar = 6;
-var foo = new Foo();
-is(foo.bar, 6, "prototype of the ctor returned from registerElement works");
-
-var protoDesc = Object.getOwnPropertyDescriptor(Foo, "prototype");
-is(protoDesc.configurable, false, "proto should be non-configurable");
-is(protoDesc.enumerable, false, "proto should be non-enumerable");
-is(protoDesc.writable, false, "proto should be non-writable");
-
-// TODO: FIXME!
-shouldThrow(function() {
-              document.registerElement('x-foo2', {
-                prototype: Foo.prototype
-              });
-            },
-            "if proto is an interface prototype object, registerElement should throw",
-            "not supported",
-            /* todo = */ true);
-
-var nonConfigReadonlyProto = Object.create(HTMLElement.prototype,
-  { constructor: { configurable: false, writable: false, value: 42 } });
-
-shouldThrow(function() {
-              document.registerElement('x-nonconfig-readonly', {
-                prototype: nonConfigReadonlyProto
-              });
-            },
-            "non-configurable and not-writable constructor property",
-            "not supported");
-
-
-// this is not defined in current spec:
-var readonlyProto = Object.create(HTMLElement.prototype,
-  { constructor: { configurable: true, writable: false, value: 42 } });
-
-var Readonly = document.registerElement('x-nonconfig-readonly', {
-  prototype: readonlyProto
-});
-
-is(Readonly.prototype, readonlyProto, "configurable readonly constructor property");
-
-var handler = {
-  getOwnPropertyDescriptor: function(target, name) {
-    return name == "constructor" ? undefined : Object.getOwnPropertyDescriptor(target,name);
-  },
-  defineProperty: function(target, name, propertyDescriptor) {
-     if (name == "constructor") {
-      throw "spec this";
-    }
-
-    return Object.defineProperty(target, name, propertyDescriptor);
-  },
-  has: function(target, name) {
-    if (name == "constructor") {
-      return false;
-    }
-    return name in target;
-  }
-};
-var proxy = new Proxy({}, handler);
-
-shouldThrow(function() {
-              document.registerElement('x-proxymagic', {
-                prototype: proxy
-              });
-            },
-            "proxy magic",
-            "spec this");
-
-var getOwn = 0;
-var defineProp = 0;
-var handler2 = {
-  getOwnPropertyDescriptor: function(target, name) {
-    if (name == "constructor") {
-      getOwn++;
-    }
-    return Object.getOwnPropertyDescriptor(target,name);
-  },
-  defineProperty: function(target, name, propertyDescriptor) {
-    if (name == "constructor") {
-      defineProp++;
-    }
-    return Object.defineProperty(target, name, propertyDescriptor);
-  }
-};
-var proxy2 = new Proxy({}, handler2);
-
-document.registerElement('x-proxymagic2', {
-  prototype: proxy2
-});
-
-is(getOwn, 1, "number of getOwnPropertyDescriptor calls from registerElement: " + getOwn);
-is(defineProp, 1, "number of defineProperty calls from registerElement: " + defineProp);
-
-  </script>
-</head>
-<body>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1081037">Mozilla Bug 1081037</a>
-<p id="display"></p>
-<div id="content" style="display: none">
-
-</div>
-<pre id="test">
-</pre>
-</body>
-</html>
diff --git a/dom/tests/mochitest/webcomponents/mochitest.ini b/dom/tests/mochitest/webcomponents/mochitest.ini
index 756e6f2ae1..2cfd747c4e 100644
--- a/dom/tests/mochitest/webcomponents/mochitest.ini
+++ b/dom/tests/mochitest/webcomponents/mochitest.ini
@@ -17,12 +17,14 @@ support-files =
   htmlconstructor_builtin_tests.js
 [test_custom_element_in_shadow.html]
 skip-if = true || stylo # disabled - See bug 1390396 and 1293844
-[test_custom_element_register_invalid_callbacks.html]
 [test_custom_element_throw_on_dynamic_markup_insertion.html]
 [test_custom_element_get.html]
 [test_custom_element_when_defined.html]
 [test_custom_element_uncatchable_exception.html]
 skip-if = !debug # TestFunctions only applied in debug builds
+[test_custom_element_define.html]
+[test_custom_element_define_parser.html]
+[test_custom_element_template.html]
 [test_nested_content_element.html]
 [test_dest_insertion_points.html]
 [test_fallback_dest_insertion_points.html]
@@ -41,7 +43,6 @@ skip-if = true # disabled - See bug 1390396
 [test_event_stopping.html]
 [test_template.html]
 [test_template_xhtml.html]
-[test_template_custom_elements.html]
 [test_shadowroot.html]
 [test_shadowroot_inert_element.html]
 [test_shadowroot_style.html]
diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_callback_innerhtml.html b/dom/tests/mochitest/webcomponents/test_custom_element_callback_innerhtml.html
index bb5008538a..22d9571178 100644
--- a/dom/tests/mochitest/webcomponents/test_custom_element_callback_innerhtml.html
+++ b/dom/tests/mochitest/webcomponents/test_custom_element_callback_innerhtml.html
@@ -18,23 +18,19 @@ SimpleTest.waitForExplicitFinish();
 
 var connectedCallbackCount = 0;
 
-var p = Object.create(HTMLElement.prototype);
-
-p.createdCallback = function() {
-  ok(true, "createdCallback called.");
+class Foo extends HTMLElement {
+  connectedCallback() {
+    ok(true, "connectedCallback should be called when the parser creates an element in the document.");
+    connectedCallbackCount++;
+    // connectedCallback should be called twice, once for the element created for innerHTML and
+    // once for the element created in this document.
+    if (connectedCallbackCount == 2) {
+      SimpleTest.finish();
+    }
+  }
 };
 
-p.connectedCallback = function() {
-  ok(true, "connectedCallback should be called when the parser creates an element in the document.");
-  connectedCallbackCount++;
-  // connectedCallback should be called twice, once for the element created for innerHTML and
-  // once for the element created in this document.
-  if (connectedCallbackCount == 2) {
-    SimpleTest.finish();
-  }
-}
-
-document.registerElement("x-foo", { prototype: p });
+customElements.define("x-foo", Foo);
 
 var container = document.getElementById("container");
 container.innerHTML = '<x-foo></x-foo>';
diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_register_invalid_callbacks.html b/dom/tests/mochitest/webcomponents/test_custom_element_register_invalid_callbacks.html
deleted file mode 100644
index 572579ba8d..0000000000
--- a/dom/tests/mochitest/webcomponents/test_custom_element_register_invalid_callbacks.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=1275835
--->
-<head>
-  <title>Test registering invalid lifecycle callbacks for custom elements.</title>
-  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
-</head>
-<body>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1275835">Bug 1275835</a>
-<iframe id="iframe"></iframe>
-<script>
-
-// Use window from iframe to isolate the test.
-const testWindow = iframe.contentDocument.defaultView;
-
-// This is for backward compatibility.
-// We should do the same checks for the callbacks from v0 spec.
-[
-  'attributeChangedCallback',
-].forEach(callback => {
-  var c = class {};
-  var p = c.prototype;
-
-  // Test getting callback throws exception.
-  Object.defineProperty(p, callback, {
-    get() {
-      const e = new Error('this is rethrown');
-      e.name = 'rethrown';
-      throw e;
-    }
-  });
-
-  SimpleTest.doesThrow(() => {
-    testWindow.document.registerElement(`test-register-${callback}-rethrown`,
-                                        { prototype: p });
-  }, `document.registerElement should throw exception if prototype.${callback} throws`);
-
-  SimpleTest.doesThrow(() => {
-    testWindow.customElements.define(`test-define-${callback}-rethrown`, c);
-  }, `customElements.define should throw exception if constructor.${callback} throws`);
-
-  // Test callback is not callable.
-  [
-    { name: 'null', value: null },
-    { name: 'object', value: {} },
-    { name: 'integer', value: 1 },
-  ].forEach(data => {
-    var c = class {};
-    var p = c.prototype;
-
-    p[callback] = data.value;
-
-    SimpleTest.doesThrow(() => {
-      testWindow.document.registerElement(`test-register-${callback}-${data.name}`,
-                                             { prototype: p });
-    }, `document.registerElement should throw exception if ${callback} is ${data.name}`);
-
-    SimpleTest.doesThrow(() => {
-      testWindow.customElements.define(`test-define-${callback}-${data.name}`, c);
-    }, `customElements.define should throw exception if ${callback} is ${data.name}`);
-  });
-});
-
-</script>
-</body>
-</html>
diff --git a/dom/tests/mochitest/webcomponents/test_document_register_parser.html b/dom/tests/mochitest/webcomponents/test_document_register_parser.html
deleted file mode 100644
index a4fb63139f..0000000000
--- a/dom/tests/mochitest/webcomponents/test_document_register_parser.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=783129
--->
-<head>
-  <title>Test for document.registerElement for elements created by the parser</title>
-  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
-<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
-<script>
-
-var extendedButtonProto = Object.create(HTMLButtonElement.prototype);
-var buttonCallbackCalled = false;
-extendedButtonProto.connectedCallback = function() {
-  is(buttonCallbackCalled, false, "created callback for x-button should only be called once.");
-  is(this.tagName, "BUTTON", "Only the <button> element should be upgraded.");
-  buttonCallbackCalled = true;
-};
-
-document.registerElement("x-button", { prototype: extendedButtonProto, extends: "button" });
-
-var divProto = Object.create(HTMLDivElement.prototype);
-var divCallbackCalled = false;
-divProto.connectedCallback = function() {
-  is(divCallbackCalled, false, "created callback for x-div should only be called once.");
-  is(buttonCallbackCalled, true, "crated callback should be called for x-button before x-div.");
-  is(this.tagName, "X-DIV", "Only the <x-div> element should be upgraded.");
-  divCallbackCalled = true;
-  SimpleTest.finish();
-};
-
-document.registerElement("x-div", { prototype: divProto });
-
-SimpleTest.waitForExplicitFinish();
-</script>
-</head>
-<body>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783129">Bug 783129</a>
-<button is="x-button"></button><!-- should be upgraded -->
-<x-button></x-button><!-- should not be upgraded -->
-<span is="x-button"></span><!-- should not be upgraded -->
-<div is="x-div"></div><!-- should not be upgraded -->
-<x-div></x-div><!-- should be upgraded -->
-<script>
-</script>
-</body>
-</html>
diff --git a/dom/tests/mochitest/webcomponents/test_document_shared_registry.html b/dom/tests/mochitest/webcomponents/test_document_shared_registry.html
deleted file mode 100644
index db72e1e6ca..0000000000
--- a/dom/tests/mochitest/webcomponents/test_document_shared_registry.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=783129
--->
-<head>
-  <title>Test shared registry for associated HTML documents.</title>
-  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
-</head>
-<body>
-<div id="container"></div>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783129">Bug 783129</a>
-<script>
-var container = document.getElementById("container");
-
-function registerNoRegistryDoc() {
-  var assocDoc = document.implementation.createDocument(null, "html");
-  try {
-    assocDoc.registerElement("x-dummy", { prototype: Object.create(HTMLElement.prototype) });
-    ok(false, "Registring element in document without registry should throw.");
-  } catch (ex) {
-    ok(true, "Registring element in document without registry should throw.");
-  }
-
-  runNextTest();
-}
-
-function runNextTest() {
-  if (testFunctions.length > 0) {
-    var nextTestFunction = testFunctions.shift();
-    nextTestFunction();
-  }
-}
-
-var testFunctions = [
-  registerNoRegistryDoc,
-  SimpleTest.finish
-];
-
-SimpleTest.waitForExplicitFinish();
-
-runNextTest();
-</script>
-</body>
-</html>
diff --git a/dom/tests/mochitest/webcomponents/test_template_custom_elements.html b/dom/tests/mochitest/webcomponents/test_template_custom_elements.html
deleted file mode 100644
index f7f4340cf4..0000000000
--- a/dom/tests/mochitest/webcomponents/test_template_custom_elements.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=1091425
--->
-<head>
-  <title>Test for custom elements in template</title>
-  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
-</head>
-<body>
-<template>
-  <x-foo></x-foo>
-</template>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1091425">Bug 1091425</a>
-<script>
-
-var p = {};
-p.createdCallback = function() {
-  ok(false, "Created callback should not be called for custom elements in templates.");
-};
-
-document.registerElement("x-foo", { prototype: p });
-
-ok(true, "Created callback should not be called for custom elements in templates.");
-
-</script>
-<template>
-  <x-foo></x-foo>
-</template>
-</body>
-</html>
diff --git a/dom/tests/mochitest/webcomponents/test_unresolved_pseudo_class.html b/dom/tests/mochitest/webcomponents/test_unresolved_pseudo_class.html
index 3e1fae8ee8..a1ff3b3c6b 100644
--- a/dom/tests/mochitest/webcomponents/test_unresolved_pseudo_class.html
+++ b/dom/tests/mochitest/webcomponents/test_unresolved_pseudo_class.html
@@ -42,7 +42,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1111633
 <span id="del" is="x-del"></span>
 <script>
 
-// Before registerElement
+// Before define
 var foo = document.querySelector('#foo');
 is(getComputedStyle(foo).color, "rgb(0, 0, 255)", "foo - color");
 is(getComputedStyle(foo).backgroundColor, "rgb(0, 0, 255)", "foo - backgroundColor");
@@ -58,25 +58,25 @@ is(getComputedStyle(baz).backgroundColor, "rgb(0, 0, 255)", "baz - backgroundCol
 var span1 = document.querySelector('#span1');
 is(getComputedStyle(span1).color, "rgb(255, 0, 0)", "span1 - color");
 
-var Foo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) });
+customElements.define('x-foo', class extends HTMLElement {});
 
-var Bar = document.registerElement('x-bar', { extends: 'span', prototype: Object.create(HTMLSpanElement.prototype) });
+customElements.define('x-bar', class extends HTMLSpanElement {}, { extends: 'span' });
 
-var Baz = document.registerElement('x-baz', { prototype: Object.create(HTMLElement.prototype) });
+customElements.define('x-baz', class extends HTMLElement {});
 
-// After registerElement
+// After define
 is(getComputedStyle(foo).color, "rgb(255, 0, 0)",
-   "foo - color (after registerElement)");
+   "foo - color (after define)");
 
 is(getComputedStyle(bar).color,
-   "rgb(255, 0, 0)", "bar - color (after registerElement)");
+   "rgb(255, 0, 0)", "bar - color (after define)");
 
 is(getComputedStyle(baz).color,
-   "rgb(255, 0, 0)", "baz - color (after registerElement)");
+   "rgb(255, 0, 0)", "baz - color (after define)");
 is(getComputedStyle(baz).backgroundColor,
-   "rgb(255, 0, 0)", "baz - backgroundColor (after registerElement)");
+   "rgb(255, 0, 0)", "baz - backgroundColor (after define)");
 
-is(getComputedStyle(span1).color, "rgb(0, 255, 0)", "span1 - color (after registerElement)");
+is(getComputedStyle(span1).color, "rgb(0, 255, 0)", "span1 - color (after define)");
 
 // After tree removal
 var del = document.querySelector('#del');
@@ -88,9 +88,11 @@ par.removeChild(del);
 del.setAttribute("is", "foobar");
 par.appendChild(del);
 is(getComputedStyle(del).color, "rgb(0, 0, 255)", "del - color (after reappend)");
-var Del = document.registerElement('x-del', { extends: 'span', prototype: Object.create(HTMLSpanElement.prototype) });
+
+class Del extends HTMLSpanElement {};
+customElements.define('x-del', Del, { extends: 'span' });
 // [is="x-del"] will not match any longer so the rule of span will apply
-is(getComputedStyle(del).color, "rgb(0, 255, 0)", "del - color (after registerElement)");
+is(getComputedStyle(del).color, "rgb(0, 255, 0)", "del - color (after define)");
 // but the element should have been upgraded:
 ok(del instanceof Del, "element was upgraded correctly after changing |is|");
 
diff --git a/dom/webidl/Document.webidl b/dom/webidl/Document.webidl
index cad6e1c396..ba2ec17ea7 100644
--- a/dom/webidl/Document.webidl
+++ b/dom/webidl/Document.webidl
@@ -271,13 +271,6 @@ partial interface Document {
   attribute EventHandler onpointerlockerror;
 };
 
-//http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html#dfn-document-register
-partial interface Document {
-    // this is deprecated from CustomElements v0
-    [Throws, Func="CustomElementRegistry::IsCustomElementEnabled"]
-    object registerElement(DOMString name, optional ElementRegistrationOptions options);
-};
-
 // https://w3c.github.io/page-visibility/#extensions-to-the-document-interface
 partial interface Document {
   [Pref="dom.visibilityAPI.enabled"]
diff --git a/dom/webidl/WebComponents.webidl b/dom/webidl/WebComponents.webidl
index f9bb8214af..9c5e53131b 100644
--- a/dom/webidl/WebComponents.webidl
+++ b/dom/webidl/WebComponents.webidl
@@ -25,8 +25,3 @@ dictionary LifecycleCallbacks {
   LifecycleAdoptedCallback? adoptedCallback;
   LifecycleAttributeChangedCallback? attributeChangedCallback;
 };
-
-dictionary ElementRegistrationOptions {
-  object? prototype = null;
-  DOMString? extends = null;
-};
diff --git a/js/xpconnect/tests/mochitest/test_bug1094930.html b/js/xpconnect/tests/mochitest/test_bug1094930.html
index 674edfe475..285865db4c 100644
--- a/js/xpconnect/tests/mochitest/test_bug1094930.html
+++ b/js/xpconnect/tests/mochitest/test_bug1094930.html
@@ -15,15 +15,15 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1094930
 <p id="display"></p>
 <script type="application/javascript">
   SimpleTest.waitForExplicitFinish();
-  var proto = { 
-    connectedCallback: function() {
+  class XFoo extends frames[0].HTMLElement {
+    connectedCallback() {
       ok(true, "connectedCallback was called");
-      SimpleTest.finish()
+      SimpleTest.finish();
     }
   };
 
-  var f = document.registerElement.call(frames[0].document, "x-foo", { prototype: proto });
-  frames[0].document.firstChild.appendChild(new f());
+  customElements.define.call(frames[0].customElements, "x-foo", XFoo);
+  frames[0].document.firstChild.appendChild(new XFoo());
 </script>
 </body>
 </html>
diff --git a/layout/base/crashtests/1261351-iframe.html b/layout/base/crashtests/1261351-iframe.html
index 82c1e25fae..a0484f3325 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 097217d188..0460c8756f 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"]');
 
-  proto.createdCallback = function() {
-    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;
+      }
 
-    var checked = this.getAttribute('checked');
-    if (checked !== null) {
-      this._input.checked = true;
+      shadow.appendChild(this._template);
+
+      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');
     },