Register

When called, the register method must run these steps:

Input

• ENVIRONMENT, the unit of related similar-origin browsing contexts
• DOCUMENT, the context object of the method
• NAME, the custom element name of the element being registered
• FUNCTION, the custom element constructor function, optional

Output

• The FUNCTION is mutated to have a new @@create function that creates a new Element object.

---

1. If NAME is an invalid custom element name, throw an InvalidCharacterError and stop.
2. Let NAMESPACE be HTML Namespace
3. Let TYPE be NAME
4. If FUNCTION is null: 1. Let FUNCTION be the result of calling FunctionAllocate with HTMLElement as the functionPrototype and true as strict. 2. Let PROTOTYPE be the result of calling ObjectCreate with HTMLElement.prototype as the proto. 3. Call DefinePropertyOrThrow(PROTOTYPE, "constructor", PropertyDescriptor{[[Value]]: FUNCTION, [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: false}). 4. Call DefinePropertyOrThrow(FUNCTION, "prototype", PropertyDescriptor{[[Value]]: PROTOTYPE, [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: false}).
5. Otherwise: 1. If FUNCTION and DOCUMENT are from different browsing contexts, throw a NotSupportedError and stop. 2. Let INTERFACE be FUNCTION's interface 3. If INTERFACE inherits from SVGElement, set NAMESPACE to SVG Namespace 4. Otherwise, if INTERFACE does not inherit from HTMLElement, throw a NamespaceError and stop. 5. Let BASE be INTERFACE's inherited interface that is nearest to BASE in the prototype chain and that is an element interface 6. If BASE is not HTMLElement or SVGElement, let NAME be the local name, associated with BASE element interface 7. Let PROTOTYPE be the result of Get(FUNCTION, "prototype").
6. If DOCUMENT is an HTML document, convert both NAME and TYPE to lowercase
7. If there already exists a definition with the same TYPE, throw a NotSupportedError and stop.
8. Let LIFECYCLE be lifecycle callbacks
9. Transfer callback named ready to LIFECYCLE from property named readyCallback on PROTOTYPE
10. Transfer callback named inserted to LIFECYCLE from property named insertedCallback on PROTOTYPE
11. Transfer callback named removed to LIFECYCLE from property named removedCallback on PROTOTYPE
12. Let DEFINITION be the set of (TYPE, NAME, NAMESPACE, FUNCTION, LIFECYCLE)
13. Register the DEFINITION with DOCUMENT
14. Run element upgrade algorithm with DOCUMENT's browsing context and DEFINITION as arguments
15. Invoke lifecycle callbacks with ENVIRONMENT as argument
16. Return result of running custom element constructor generation algorithm with FUNCTION as argument.

Custom Element Constructor Generation Algorithm

Input

• FUNCTION, the custom element constructor function.

Output

• The FUNCTION is mutated to have a new @@create function that creates a new Element object.

---

1. If FUNCTION is already an interface constructor object for any interface object throw a TypeError and stop.
2. Let DEFINITION be an element definition that has FUNCTION as custom element prototype
3. Let CREATE be a function which when called executes the following steps: 1. Let TYPE be the custom element name in DEFINITION 2. Let NAME be the local name in DEFINITION 3. Let NAMESPACE be the namespace in DEFINITION 4. Let ELEMENT be the context object 5. Set ELEMENT's local name to NAME, namespace to the NAMESPACE, and node document to the document with which DEFINITION is registered 6. If TYPE is not the same as NAME, set the value of ELEMENT's is attribute to TYPE 7. Run the element initialization algorithm with ELEMENT as argument 8. Return ELEMENT.
4. Call DefinePropertyOrThrow(FUNCTION, @@create, PropertyDescriptor{[[Value]]: CREATE, [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: false}).